jquery validation plugin not working

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

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) {

Try to move validation to document ready handler:

$(document).ready(function() { $('#formID').validate({...}) });

That's not the way the validation plugin works. You need to set your validation code inside the document.ready() function and then call the .form() method in your onClick You can use the submit:false option if you don't want the form validated on any form submit event...

Something like this:

var _validator;

$(function() {
    _validator = $('#formID').validate({
          onsubmit: false,
          rules: { ... },
          messages: { ... }
    });

    $('#buttonID').click(function(e) {
        e.preventDefault();
        if ( _validator.form() ) {
            // valid form code
        }
    });
});

UPDATE :

Working jsFiddle example here : http://jsfiddle.net/shaneblake/RQMaV/

validation plugin works out with 'name' of the input field means

$('#formID').validate({
    rules: {
        firstName: "required"
    }
});

inside the rules we uses the name of the input field not the id <input type="text" name="firstName" id="firstName" class="readOnlyIp" value="" /> so amke

use validate() to create rules for validating fields

the call valid() to check if rules are met