Question

Currently I have a set of fields on a page. When the button is clicked, and the validation for these fields pass, a dialog modal box will appear. This box has a few other fields that must be filled in before the form can be submitted.

How can I show that the first set of fields are validate and open the dialog with out submitting the form until the dialog fields have also been validated?

$( "#check-button" )  
    .button()  
    .click(function(e) { 
         // Section 1 
         $(':text, select, textarea').each(function() {  
             if ($(this).val().length == 0) {  
                     $(this).css('border', '2px solid red');  
                     e.preventDefault();  
             }  
         });  

         //Section 2
         //e.preventDefault();
         //$('#my_form').submit();
         //$( "#dialog-form" ).dialog( "open" );
});

I have tried commenting both above sections out. Section 1 leaves everything highlighted and does not submit my form. Section 2 submits my form with out the second items being validated. The inputs for both sections are part of the same form. Please let me know if there is something else I should explain about this situation.

In summary, I am looking for a way to validate each item based on id and once the first set has passed, open the dialog, allow the user to enter in the second set and validate the second set of fields. Finally, submitting the form.

Thank you in advance for any guidance.

Answer 1

One way of doing this is to just create a validate function and return true; if all fields look good, otherwise return false; …if it returns true, then you show the dialog box.

A quick example for you (I made my own variation, but you should get the idea): http://jsfiddle.net/iwasrobbed/acU4Q/1/

By the way, if you’re checking for 0 length on the field, make sure you use trim() so you remove any whitespaces. The way you currently have it, pressing the spacebar once will actually mean the input is valid even though the field is blank.