我使用jQuery创建了一个动态表单，它有两个部分，一旦第一部分正确完成，第二部分加载而没有页面刷新。
我的问题是，当第二部分完成后，我需要执行验证，显然确保没有错误的数据发送到服务器。发生的事情是，如果我第二次单击提交按钮提交不正确的数据，验证将在初始单击提交按钮时工作，但即使没有在表单输入字段中修复数据也是如此？
我在线搜索了一个答案，并尝试了一些不同的东西：
我尝试将第二个提交方法更改为：
$('infoform').submit(function() {
// .. stuff
}）;
但是这没有用，也有人建议我尝试：
$('#submit_second').submit(function(evt){
evt.preventDefault();
...
}）;
但这也没有用，只能阻止验证完全正常工作？
我想要的是显然要让验证继续检查错误，直到输入的数据是正确的，并且一旦不再有使用ajax调用发送数据的错误？
表单的代码是：
<form id="infoform" name="infoform" action="#" method="post">
<div id="first_step">
<!--<h1>WANT A FREE<br />SOCIAL MEDIA<br />AUDIT?</h1>-->
<div class="formtext-img"></div>
<div class="form">
<label for="username">Facebook or Twitter page address:</label>
<input type="text" name="url" id="url" value="http://" />
</div><!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
</div><!--end of first step-->
<div id="second_step">
<div class="form">
<div id="nameInput">
<label for="yourname">Your Full Name. </label>
<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input type="text" name="yourname" id="yourname" placeholder="Your name" />
</div>
<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<div id="emailInput">
<label for="email">Your email address.</label>
<input type="text" name="email" id="email" placeholder="Email address" />
</div>
<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<div id="phoneInput">
<label for="phone">Your contact number. </label>
<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input type="text" name="phone" id="phone" placeholder="contact number" />
</div>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!--<input class="back" type="button" value="" />-->
<input class="send submit" type="submit" name="submit_second" id="submit_second" value="" />
</div><!--end of second step-->
</form>
这是我的jQuery，我尝试将两个“submit_second”函数合并为一个，但是当点击第二个提交按钮时，这会停止发生任何事情！
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var phonePattern = /^\+?[0-9]{0,15}$/ ;
var fields = $('#second_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='phone' && !phonePattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
$('#submit_second').click(function(){
url =$("input#url").val();
yourname =$("input#yourname").val();
email =$("input#email").val();
phone =$("input#phone").val();
//send information to server
var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone;
//alert (dataString);
$.ajax({
type: "POST",
url: "#",
data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone,
cache: false,
success: function(data) {
console.log("form submitted");
alert(dataString);
}
});
return false;
});
答案 0 :(得分：0)
您有一个提交按钮和一个提交事件不是更合乎逻辑。 然后，提交功能将运行验证，并根据其结果提交或不提交表格。
答案 1 :(得分：0)
好的，所以经过多次修补代码并多次尝试相同的事情后，我终于让它按照我想要的方式工作了！
我已经将Ajax调用放回到一个方法以及验证检查中，并找出了我出错的地方......语法错误！在Ajax调用提交数据之前，我忘记关闭括号以进行验证检查！我的错！我对此很陌生，所以我很高兴终于让它工作了！
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var phonePattern = /^\+?[0-9]{0,15}$/ ;
var fields = $('#second_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 /*|| value==field_values[$(this).attr('id')]*/ || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='phone' && !phonePattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
console.log("running");
error++;
} else {
$(this).addClass('valid');
}
});
if(error==0) {
url =$("input#url").val();
yourname =$("input#yourname").val();
email =$("input#email").val();
phone =$("input#phone").val();
//send information to server
var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone;
//alert (dataString);
$.ajax({
type: "POST",
url: "http://clients.socialnetworkingsolutions.com/infobox/contact/",
data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone,
cache: false,
success: function(data) {
console.log("form submitted");
alert(dataString);
}
});
return false;
}
});