Я использую плагин формы JQuery (http://malsup.com/jquery/form/) для обработки представления ajax формы. У меня также есть JQuery.Validate(http://docs.jquery.com/Plugins/Validation), подключенный для моей проверки на стороне клиента.
То, что я вижу, заключается в том, что проверка не выполняется, когда я ожидаю, что она не прекратит отправку формы. Когда я использовал традиционную форму (т.е. Не-ajax), ошибка проверки не давала формы для отправки вообще...., что является моим желаемым поведением.
Я знаю, что проверка правильности подключена правильно, так как сообщения проверки еще появляются после того, как произошла попытка ajax submit.
Итак, что мне не хватает, что мешает моему желаемому поведению? Пример кода ниже....
<form id="searchForm" method="post" action="/User/GetDetails">
<input id="username" name="username" type="text" value="user.name" />
<input id="submit" name="submit" type="submit" value="Search" />
</form>
<div id="detailsView">
</div>
<script type="text/javascript">
var options = {
target: '#detailsView'
};
$('#searchForm').ajaxForm(options);
$('#searchForm').validate({
rules: {
username: {required:true}},
messages: {
username: {required:"Username is a required field."}}
});
</script>
Вам нужно добавить функцию обратного вызова для использования с событием beforeSubmit при инициализации ajaxForm():
var options = {
beforeSubmit: function() {
return $('#searchForm').validate().form();
},
target: '#detailsView'
};
Теперь он проверяет результат проверки перед отправкой страницы.
... ну это было время, поэтому моя ситуация немного изменилась. В настоящее время у меня есть опция submitHandler, переданная в плагин Validate(). В этом обработчике я вручную использую ajaxSubmit. Больше обходного решения, чем ответ, я думаю. Надеюсь, что это поможет.
http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html
var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({target: "#result"});
}
});
$('#contactform').ajaxForm({
success : FormSendResponse,
beforeSubmit: function(){
return $("#contactform").valid();
}
});
$("#contactform").validate();
Выше код работал отлично для меня.
Как первый проход, мне интересно, почему строка
$("form").validate({
не относится к $( "searchform" ). Я не смотрел это или не пытался, но это похоже на несоответствие. Не хотите ли вы вызвать подтверждение в соответствующей форме?
В любом случае, если это совершенно неправильно, то ошибка не сразу очевидна.:)
Также убедитесь, что все ваши поля ввода имеют атрибут "имя", а также атрибут "id". Я заметил, что плагин проверки jquery не работает корректно без них.
ok, это старый вопрос, но я поставлю наше решение здесь для потомков. я лично классифицирую это как хак-трофей, но, по крайней мере, это не хак-таку-манджаро
<script type="text/javascript">
var options = {
target: '#detailsView'
};
// -- "solution" --
$('#searchForm').submit(function(event) {
this.preventDefault(event); // our env actually monkey patches preventDefault
// impl your own prevent default here
// basically the idea is to bind a prevent default
// stopper on the form submit event
});
// -- end --
$('#searchForm').ajaxForm(options);
$('#searchForm').validate({
rules: {
username: {required:true}},
messages: {
username: {required:"Username is a required field."}}
});
</script>
Может быть return false; по форме поможет? :) Я имею в виду:
<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">