jQuery插件验证和Ajax

Question

我正在使用jQuery插件“验证”来验证我正在使用的窗体。它的工作原理和错误消息只需要一些CSS样式。

但是，这是问题所在。我使用Ajax来提交表单，因此当用户提交表单时，表单淡出并显示一条不错的成功消息。但是，如果用户错过了必填字段，表单将淡出，并且他们会看到错误消息。他们可以点击一个按钮并查看表单以及错误的位置。现在他们修复错误，然后再次提交。他们现在正在提交表单并且表单不会处理。他们必须刷新页面才能提交表单。这是一种痛苦，对用户来说不是一个好的过程。

这里是一个问题：我如何验证用户在所有必填字段中都有字段之前他们提交并避免上述问题？

感谢您的任何建议和帮助。

编辑添加的代码：

AJAX和验证码：

<script type="text/javascript"> 
function jqsub() { 

var $j = jQuery.noConflict(); 
var $jform = $j('#contactform'); // form ID 
var $jmessagebox = $j('#ajaxdiv'); // message box ID 
var $jsuccessmessage = "<h3>We will be in contact soon. </h3>"; // success message in HTML format 
var $jerrormessage = "<h3>Error - Please Try Again</h3><p class='light_button' id='errorbutton'>Return to Form </p><p>Please Note: You may have to refresh your page before you can submit the form again. We apologize for any inconvenience. </p><p>If the error continues please contact us at <a href='mailto:support@site.com'>Support@site.com</a></p>"; //error message in HTML format 

$j.ajax({ 
    type: 'POST', 
    url: $jform.attr('action'), 
    data: $jform.serialize(), 
    success: function (msg) { 
        if (msg.FormProcessV2Response.success) { 
        $jmessagebox.append($jsuccessmessage) 
        $jmessagebox.fadeIn(); 
        } 
        else { 
        $jmessagebox.append($jerrormessage) 
        $jmessagebox.fadeIn(); 
        }  
      }, 
    error: function (msg) { 
         $jmessagebox.append($jerrormessage) 
         $jmessagebox.fadeIn(); 
       }, 
    }); 
$jform.fadeOut("slow", function(){ //fade out of form after success 
    $jmessagebox.fadeIn("slow"); 
}); 
$j("#errorbutton").live('click',function(){ //allows form to be faded in, in the event of an error 
    $jmessagebox.fadeOut("slow", function(){ 
     $jform.fadeIn("slow"); 
    }); 
}); 

} 
</script> 
<script type="text/javascript"> 
var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
    $j('#contactform').validate(); 
}); 
</script> 

表单代码：

<form action="/FormProcessv2.aspx?WebFormID=45926&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&JSON=1" enctype="multipart/form-data" onsubmit="return checkWholeForm33499(this)" method="post" name="catwebformform33499" id="contactform"> 
<fieldset> 
<input name="FullName" type="text" class="required cat_textbox" id="FullName" value="{module_fullname}" maxlength="255" /> 
<label for="FullName">Full Name<span>required</span></label> 
<input name="EmailAddress" type="text" class="required email cat_textbox" id="EmailAddress" value="{module_emailaddress}" maxlength="255" /><label for="email">Email Address<span>required</span></label> 
<input name="CellPhone" type="text" class="required cat_textbox" id="CellPhone" value="{module_cellphone}" maxlength="255" /><label for="cellphone">Cell Phone<span>required</span></label> 
</fieldset> 
<fieldset> 
<textarea onkeydown="if(this.value.length&gt;=1024)this.value=this.value.substring(0,1023);" class="required cat_listbox" rows="4" cols="10" id="CAT_Custom_254790" name="CAT_Custom_254790"></textarea></td> 
<label for="message">Message<span>required</span></label> 
</fieldset> 
<fieldset> 
<label>Verification <span>required</span></label> 
{module_captchav2} 
</fieldset> 
<div> 
<input type="submit" value="Send" tabindex="5" id="submit" name="submit" class="light_button_send" /> 
</div> 
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
var submitcount33499 = 0;function checkWholeForm33499(theForm){var why = "";if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if(why != ""){alert(why);return false;}if(submitcount33499 == 0){submitcount33499++;jqsub();return false;}else{alert("Form submission is in progress.");return false;}} 
//]]> 
</script> 
</form> 

Answer 1

为什么不只是有你的淡入和淡出你的$内部调用.ajax成功功能？

喜欢的东西

$j.ajax({ 
    . 
    . 
    . 
    success: function (msg) { 
       if (msg.FormProcessV2Response.success) { 
        $jmessagebox.append($jsuccessmessage) 
        $jmessagebox.fadeIn(); 
        $jform.fadeOut("slow" 
            , function(){ //fade out of form after success 
             $jmessagebox.fadeIn("slow"); 
        }); 
       } 
       else { 
        $jmessagebox.append($jerrormessage) 
        $jmessagebox.fadeIn(); 
       }  
     }, 
     . 
     . 
     . 
}); 

这样一来，他只形成淡出，如果没有错误。

至于你重新提交问题，罪魁祸首是

if(submitcount33499 == 0){ 
    submitcount33499++; 
    jqsub(); 
    return false; 
} 
else{ 
    alert("Form submission is in progress."); 
    return false; 
} 

当表单提交的第一次，submitcount33499被ingremented（因为它应该有一个0值首次周围。第二届阵子测试失败的考验，进入else分支

，如果提交反正算你为什么跟踪