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

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.

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>

This is very similar to the accepted answer except for two things...

I'm using an event.preventDefault() to block the default behaviors of the anchor element.

$("#submit").click(function(e) {
    e.preventDefault();
    $("#search_booking").submit();
});

I've added a href="#" so that the jump to the top of the page can be properly blocked by the .preventDefault(), as well as to maintain HTML standards compliance.
```
<a id="submit" href="#" style="cursor: pointer">Search</a>
```

$(document).ready(function() {
  $("#search_booking").validate({
    rules: {
      job_date: {
        required: true
      }
    },
    messages: {
      job_date: {
        required: "Please provide job date."
      }
    },
    submitHandler: function(form) {
      // form.submit(); //default plugin behavior
      alert('submission');  // only for demo
    }
  });

  $("#submit").click(function(e) {
    e.preventDefault();
    $("#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" href="#" style="cursor: pointer">Search</a>
</form>

</div>