Question

I am using the jQuery Plugin “Validate” to Validate a form I am using. It works and just needs a touch of styling with CSS for the error messages.

However, this is the issue. I am using Ajax to submit the form so when the user submits the form the form fades out and a nice success message shows. BUT if the user missed a required field the form fades out and they see an error message. They can click a button and see the form and where the error is. Now they fix the error and then they hit submit again. They now get form submission in progress and the form will not process. They must refresh the page to get the form to submit. It is a pain and is not a good process for the user.

Here is the question: How do I validate that the user has field in all of the required fields BEFORE they hit submit and avoid the issue mentioned above?

Thanks for any advice and help.

EDIT Added Code:

AJAX and Validate Code:

<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:[e-mail]'>[e-mail]</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 CODE:

<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

Why not just have your fadeIn and fadeOut calls inside your $.ajax success function?

Something like

$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();  
                }    
        },
        .
        .
        .
});

That way, he form only fades out if there were no errors.

As for your resubmission issue, the culprit is

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

When the form is submitted the first time, submitcount33499 gets ingremented (since it should have a value of 0 the first time around. The 2nd time around the test fails the test and goes into the else branch.

Why are you keeping track of if submission count anyway?