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分支

，如果提交反正算你爲什麼跟蹤