jQuery jquery表单验证ajaxSubmit()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6026574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery form validation ajaxSubmit()
提问by robx
I am getting very frustrated with this jquery form validation ajaxSubmit();
我对这个 jquery 表单验证 ajaxSubmit() 感到非常沮丧；
In chrome, it seems to fail silently without even hitting the submitHandler, firefox does, but still goes on to the action="contact.php" page. I was expecting it to just post in the background and possibly return results, but can't get it to work that way.
在 chrome 中，它似乎在没有点击 submitHandler 的情况下静默失败，firefox 确实如此，但仍然继续到 action="contact.php" 页面。我期待它只是在后台发布并可能返回结果，但无法让它以这种方式工作。
Edit: Found a fix for this if anyone else is interested, put this line of code somewhere in your dom ready.
编辑：如果其他人有兴趣，请找到解决此问题的方法，将这行代码放在您的 dom 中的某处准备好。
// disable HTML5 native validation and let jquery handle it.
$('form').attr('novalidate','novalidate');
HTML form:
HTML表单：
<form method="post" action="contact.php" id="contact">
<fieldset>
<input type="text" id="email" class="required email" name="email" maxlength="30" value="youremail @ example.com" />
<input type="text" id="subject" class="required" name="subject" maxlength="24" value="Enter your subject" />
<textarea id="msg" class="required textarea" name="msg" cols="30" rows="5">Reason for contact.</textarea>
<input type="submit" class="formBtn" value="Punch me an Email" />
</fieldset>
</form>
JQuery:
查询：
$(window).load(function(){
$('#contact').validate({
rules:{
email:{required: true, email:true},
subject:{required: true, minlength: 5},
msg:{required: true, minlength: 50}
},
messages:{
email:'',
subject: '',
msg: ''
},
invalidHandler:function(){
$('div.error').hide();
},
focusInvalid:true,
onfocusout:false,
submitHandler: function() {
// never hits with chrome, and alert works in FF4,
// but still goes to contact.php
$('#contact').ajaxSubmit();
}
});
});
回答by istvan.halmen
I'm not really familiar with the validation plugin, but I would try it the other way around, by validating the form in the form plugin's beforeSubmit event:
我对验证插件不是很熟悉，但我会反过来尝试，通过在表单插件的 beforeSubmit 事件中验证表单：
$('#contact').ajaxForm({
beforeSubmit: function() {
$('#contact').validate({ /* ... */ });
return $('#contact').valid();
},
success: function(resp) {
alert(resp);
}
});
回答by Tgr
submitHandleris called after a submit event is fired, thus ajaxFormregisters its own submit event handler after the submit event, which is probably too late to catch it.
submitHandler在触发提交事件后调用，因此ajaxForm在提交事件之后注册自己的提交事件处理程序，这可能为时已晚，无法捕获它。
You don't have to nest the two plugins, just validate first and ajaxify second:
您不必嵌套这两个插件，只需先验证然后 ajaxify：
$('#contact').validate({...});
$('#contact').ajaxForm();
That way, the validation event handler is called first, and the event is stopped before getting to the ajax submit handler if it is invalid.
这样，首先调用验证事件处理程序，如果它无效，则在到达 ajax 提交处理程序之前停止该事件。
回答by user3020010
<form id="Form1">
...
<button type="submit" onclick="return SendData()">
</form>
<script>
$(function () {
$("#Form1").validate();
});
function SendData(){
if ($("#Form1").valid()) {
$.ajax({
url: "/WebService/....",
type: "post",
dataType: "json"
//....
});
//do ajax but not submit
return false;
}
// checkdata
return true;
}
</script>
