jQuery Plugin Validate and Ajax

Question

私は使用しているフォームを検証するためにjQuery Plugin "Validate"を使用しています。それは動作し、エラーメッセージのためにCSSを使ったスタイリングが必要です。

ただし、これが問題です。私はフォームを提出するためにAjaxを使用しているので、ユーザーがフォームを提出するとフォームがフェードアウトし、成功のメッセージが表示されます。しかし、ユーザーが必要なフィールドを見落とした場合、フォームはフェードアウトし、エラーメッセージが表示されます。彼らは、ボタンをクリックして、フォームとエラーがどこにあるかを見ることができます。今度はエラーを修正して、もう一度submitを押します。彼らは今、進行中のフォーム提出を取得し、フォームは処理されません。提出するフォームを取得するには、ページを更新する必要があります。それは痛みであり、ユーザーのための良いプロセスではありません。

ここに質問があります：ユーザーが必要なすべてのフィールドにフィールドを持っていることを確認するにはBEFORE彼らは提出し、上記の問題を回避しますか？

ありがとうございました。

EDIT追加されたコード：

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; 
} 

である、それは0の値に最初の頃を持っているはずなので、submitcount33499は（ingrementedます。周りに2回目をテストは、テストに失敗し、他の枝に入る

提出は、とにかく数える場合のなぜあなたは維持しているトラックを