Question

jQuery validation plugin doesn’t seem to work with my code. The text fields are present in a table wrapped inside a form. This is a dynamic form.

$('#buttonID').live('click', function(event) {

        $('#formID').validate({
          rules: {
                firstName: "required",
                lastName: "required",
                phoneNum: {
                    required: true,
                    minlength: 10
                },
                pword: {
                    required: true,
                    minlength: 7
                },
                cpword: {
                    required: true,
                    minlength: 7,
                    equalTo: "#pword"
                },
                emailId: {
                    required: true,
                    email: true
                }
            },
            messages: {
                firstName: "Please enter firstname",
                lastName: "Please enter lastname",
                phoneNum: "Please provide a phone number",              
                pword: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 7 characters long"
                },
                cpword: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 7 characters long",
                    equalTo: "Please enter the same password as above"
                },
                emailId: "Please enter a valid email address"
            }

        });

    event.preventDefault();
});

Here is the code where I create a form on button click:

function createNewUser(event){
    //clear all the divs
                    if ($("#srchResults").length > 0){                  
                            $('#srchResults').empty();
                    }
        var htmlTable;

                    htmlTable = '<form id="userAttrC">';
                    htmlTable += '<table style="border: 0px; width: 91%;" id="createUserTable" class="rec_filters">';
                    htmlTable += '<tr><td>';
                    htmlTable += '<input type="submit" id="saveUser" class = "buttons" value="Save" >&nbsp;<input type="submit" id="cancelUser" class = "buttons" value="Cancel" >';
                    htmlTable += '</td></tr>';
                    htmlTable += '<tr>';
                    htmlTable += '<td style="width: 30%; vertical-align: top;">';
                    htmlTable += '</td>';
                    htmlTable += '<td style="width: 1%; text-align: center;">';
                    htmlTable += '</td>';
                    htmlTable += '<td style="width: 60%; text-align: left; vertical-align: top;">';

                    htmlTable += '<b>Personal Information</b><br />';
                    htmlTable += '<hr class="d">';
                    htmlTable += '<label for="salutation">Salutation:</label>';
                    htmlTable += '<select id="salutationDD" name="salutation" class="filterselect">';
                    htmlTable += '<option value=""></option>';
                    htmlTable += '<option value="Mr.">Mr.</option>';
                    htmlTable += '<option value="Ms.">Ms.</option>';
                    htmlTable += '<option value="Mrs.">Mrs.</option></select><br />';

                    htmlTable += '<label for="fname">First Name:</label>';
                    htmlTable += '<input type="text" name="fname" id="firstName" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="lname">Last Name:</label>';
                    htmlTable += '<input type="text" name="lname" id="lastName" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="suffix">Name Suffix:</label>';
                    htmlTable += '<input type="text" name="suffix" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="email">Email:</label>';
                    htmlTable += '<input type="text" name="email" id="emailId" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="country">Country:</label>';

                    htmlTable += '<select id="countryDD" name="country" class="filterselect">';

                    //get country list via ajax call
                    $.ajaxSetup({
                        async: false,   
                        "error":function() {   
                            alert("error");
                    }});
                    $.getJSON("<url>", 
                    {
                    countries: "1"
                    },
                    function(data) {

                            htmlTable += '<option value=""></option>';

                            for(var i=1; i<data[0].length; i++){               
                                htmlTable += '<option value="'+data[0][i]+'">'+data[0][i]+'</option>';
                            }
                    });
                    htmlTable += '</select><br />';

                    htmlTable += '<label for="phone">Phone Number:</label>';
                    htmlTable += '<input type="text" name="phone" id="phoneNum" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="ext">Phone Extension:</label>';
                    htmlTable += '<input type="text" name="ext" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="cell">Cell Phone:</label>';
                    htmlTable += '<input type="text" name="cell" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="pwd">Password:</label>';
                    htmlTable += '<input type="text" name="pwd" id="pword" class="readOnlyIp" value="" /><br />';
                    htmlTable += '<label for="cpwd">Confirm Password:</label>';
                    htmlTable += '<input type="text" name="cpwd" id="cpword" class="readOnlyIp" value="" /><br />';
                    htmlTable += '</td></tr>';
                    htmlTable += '</table>';
                    htmlTable += '</form>';

     $('#srchResults').append(htmlTable);       
    event.preventDefault();
}
$("#createUser").click(function(event){ createNewUser(event); }); 

Answer 1

adding the validation rules on the button is ok, especially if on document ready, your form doesn’t exist yet, without seeing your entire page code it’s hard to say what the BEST place to do it is though. Likely in the success handler of your ajax call that loads your form.

anyway, the point is, in your button handler, you need to actaully tell the form to validate! like so:

$('#formID').valid();

this is what i ussually do:

if($('#formId').valid()){
    //do your form posting logic here
}
else{
   //anything special you want to do with an invalid form

}

EDIT:

ok, put your $(‘#FormId’).validate() stuff right after:

$('#srchResults').append(htmlTable); 

and then have:

 if($('#formId').valid()){
        //do your form posting logic here
    }
    else{
       //anything special you want to do with an invalid form

    }

inside this:

$('#buttonID').live('click', function(event) {