在锚标记点击上使用jQuery验证

Question

I want to use jQuery validation on anchor tag click event. Here is my HTML form and jquery

HTML Form :

<form name="search_booking" id="search_booking" action="get_booking_by_cust_name.php" method="POST">
          <input type="text" name="job_date" id="job_date">
          <a id="submit" style="cursor: pointer" >Search</a>
</form>

jQuery Code:

$(document).ready(function () {
        $("#submit").click(function () {
            $("#search_booking").validate({
                rules: {
                    job_date: {required: true}
                },
                messages: {
                    job_date: {
                        required: "Please provide job date."
                    }
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
        });
    });

After clicking on anchor tag it will not submitting form to the form action.

Thanks in advance.

Answer 1

You need to initialize the validator plugin in dom ready and then in the submit button click, call the form's submit event which will do the validation.

$(document).ready(function() {
  $("#search_booking").validate({
    rules: {
      job_date: {
        required: true
      }
    },
    messages: {
      job_date: {
        required: "Please provide job date."
      }
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
  $("#submit").click(function() {
    $("#search_booking").submit();
  });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form name="search_booking" id="search_booking" action="get_booking_by_cust_name.php" method="POST">
  <input type="text" name="job_date" id="job_date">
  <a id="submit" style="cursor: pointer">Search</a>
</form>

</div>