jQuery表单验证和提交脚本冲突 [英] JQuery form validation and submit scripts conflict
问题描述
构建一个简单的JQuery/Ajax新闻通讯注册表单，然后在添加JQuery验证后返回.我对javascript/jquery不太了解；已经为此工作了好几天，并且没有任何想法.
Built a simple JQuery/Ajax newsletter signup form, then went back after the fact to add JQuery validation. I'm not very experienced with javascript/jquery; been working on this for days and am flat out of ideas.
每个脚本单独工作.如果删除了提交代码，验证器将正常工作(尽管在指定的表单操作URL下可以正常工作).提交脚本在删除验证器代码的情况下可以完美运行.但是，同时使用这两种方法时，不会进行任何验证，并且仍然可以通过提交脚本来提交表单.
Each script works individually. The validator works properly if the submit code is removed (although it will work fine with a form action URL specified). The submit script works perfectly with the validator code removed. However, with both in place, no validation takes place and the form still gets submitted vie the submission script.
我将两者整合在一起的所有尝试都以惨败告终.
All my attempts at integrating the two have failed miserably.
很明显，我缺少了一些重要的东西.即使是朝着正确方向的一丝微动，也将受到极大的赞赏
Obviously I'm missing something rather major. Even the slightest nudge in the right direction would be hugely appreciated
这是完整的代码:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<!-- form validator -->
<script>
$(document).ready(function(){
// run validator, specifies name of css div that will be displayed
// on error and hide when corrected
$("#nl").validate({
errorContainer: "#errorcontainer",
});
});
</script>
<!-- form submit -->
<script>
$(function() {
// These first three lines of code compensate for Javascript being turned on and off.
// It changes the submit input field from a type of "submit" to a type of "button".
var paraTag = $('input#submit').parent('b');
$(paraTag).children('input').remove();
$(paraTag).append('<input type="button" name="submit" id="submit" value="Submit" />');
$('input#submit').click(function() {
$("#response").css("display", "none");
$("#loading").css("display", "block");
$.ajax({
type: 'GET',
url: 'http://app.icontact.com/icp/signup.php',
data: $("form").serialize(),
complete: function(results) {
setTimeout(function() {
$("#loading").css("display", "none");
$("#response").css("display", "block");
}, 1500);
}
}); // end ajax
});
});
</script>
<style type="text/css">
<!--
#errorcontainer {
display: none;
}
#response {
display: none;
}
-->
</style>
</head>
<body>
<div id="newsletter">
<form id="nl" method="post" action="">
<div id="heading">Sign up for the NCMP newsletter </div>
<div>
<input name="fields_fname" type="text" id="fields_fname" class="required" value="First Name" size="25" />
</div>
<div>
<input name="fields_email" class="example-default-value" type="text" id="fields_email" value="Email address" />
</div>
<b>
<input type="submit" name="submit" id="submit" value="Submit" />
</b>
<div id="response">from submit script - shows on success</div>
<div id="loading"></div>
</form>
</div>
<div id="errorcontainer">from validator script - shows on error</div>
</body>
</html>
谢谢， -鲍勃
推荐答案
jQuery似乎未阻止click.这很有道理；我确定该插件可能正在使用submit事件.
It looks like click is not prevented by jQuery validate. This makes sense; I'm sure the plugin is probably tapping into the submit event.
使用jQuery validate时，集成AJAX功能的最佳选择可能是在submitHandler回调中.因此，应该简单地移动一些代码即可:
When using jQuery validate, your best bet for integrating AJAX functionality is probably going to be in the submitHandler callback. So it should be a matter of simply moving some code around:
$("#nl").validate({
errorContainer: "#errorcontainer",
submitHandler: function () {
$("#response").css("display", "none");
$("#loading").css("display", "block");
$.ajax({
type: 'GET',
url: 'http://app.icontact.com/icp/signup.php',
data: $("form").serialize(),
complete: function(results) {
setTimeout(function() {
$("#loading").css("display", "none");
$("#response").css("display", "block");
}, 1500);
}
});
}
});
submitHandler回调中的代码替换了表单提交的默认操作(该操作将执行普通的HTTP请求).
The code in the submitHandler callback replaces the default action of the form submission (which is to do a vanilla HTTP request).
这篇关于jQuery表单验证和提交脚本冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
