Я хочу использовать проверку jQuery для события щелчка тега привязки. Вот моя форма HTML и JQuery
Форма HTML:
<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:
$(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();
}
});
});
});
После нажатия на тег привязки он не будет отправлять форму в действие формы.
Заранее спасибо.
Вам нужно инициализировать плагин валидатора в dom ready, а затем нажать кнопку «Отправить», вызвать событие отправки формы, которое выполнит проверку.
$(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>
Это очень похоже на принятый ответ за исключением двух вещей …
Я использую event.preventDefault()
заблокировать поведение по умолчанию элемента привязки.
$("#submit").click(function(e) {
e.preventDefault();
$("#search_booking").submit();
});
Я добавил href="#"
так что переход к началу страницы может быть правильно заблокирован .preventDefault()
, а также для поддержания соответствия стандартам HTML.
<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>