Использовать проверку jQuery при щелчке тега привязки

Question

Использовать проверку jQuery при щелчке тега привязки

Я хочу использовать проверку 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();
}
});
});
});

После нажатия на тег привязки он не будет отправлять форму в действие формы.

Заранее спасибо.

0

jquery jquery-validate php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Вам нужно инициализировать плагин валидатора в 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>

2

Другие решения

Это очень похоже на принятый ответ за исключением двух вещей …

Я использую 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>

1

Источник