Как плагин подтверждения правильности данных JQuery продолжает работать отправлять действие
Я изучаю, как использовать плагин проверки JQuery,
и столкнулся с некоторыми вопросами
о волшебстве JQuery, которое продолжает работать отправлять действие.
Я получил простую HTML-форму, которая имеет входное текстовое поле как это:
<form class="cmxform" id="commentForm" method="get" action="">
<input id="cname" name="name" size="25" class="required" minlength="2" />
<input class="submit" type="submit" value="Submit"/>
</form>
Волшебство произошло, когда я попытался не ввести любые данные в поле и нажал
кнопка отправки. Я видел сообщение об ошибке в красном всплывающем окне,
и неважно как трудно и сколько раз
Я нажал кнопку отправки, ничто не было отправлено.
Казалось, что были некоторые сценарии, которые отключили отправлять действие,
но я просто не мог найти, какие строки кодов в Плагине Validatyion JQuery, который сделал это.
Я хочу изучить, как это работает от примеров.
3 ответа
Я бы изменил кнопку отправки на кнопку, чтобы не путать действие. После этого вы отправите форму вручную после ее проверки. Это будет выглядеть примерно так:
<head>
<script type="text/javascript">
//form validation setup
var setupFormValidation = function(){
//bind the click event to the new button with id submit-form
$("#submit-form").click(function(){
submitForm();
});
//setup validation on commentForm
$("#commentForm").validate({
errorLabelContainer: $("div#formerror"),
rules: {
name: { required: true }
},
messages:{
name: "please enter your name"
}
});
}
//define submitForm function
//this manually submits form
var submitForm = function(){
document.cmxForm.submit();
}
//document loaded
$(document).ready(function() {
//set up your form validation
setupFormValidation();
});
</script>
</head>
<!-- add your form error div -->
<div id="formerror"></div>
<!-- added name = cmfForm -->
<form class="cmxform" id="commentForm" method="get" action="" name="cmxForm">
<input id="cname" name="name" size="25" class="required" minlength="2" />
<!-- changed from submit to button with id of submit-form for jquery -->
<input type="button" class="submit" id="submit-form" value="Submit"/>
</form>
попробуйте следующее, чтобы понять это:
поместите это на страницу
<script type="text/javascript">
$(document).ready(function() {
$("#btnSubmit").click(function(){confirm("Are you sure ?");});
});
</script>
, вы увидите, что если вы нажмете кнопку «Отмена», действие отправки не произойдет. Вот почему, когда вы возвращаете false в кнопке, вы отменяете обратную передачу, когда вы возвращаете true, происходит обратная передача.
Если вы посмотрите примеры для JQuery Validate, следующий код убивает действие отправки.
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});