Question

I am using ajax request for serverside validations at the same time i am using client side validations using jquery validate but i am getting both the validations at a time i want to restrict server side validation till client side validation is complete

my jquery code

$(document).ready(function(){
    $("#userForm").validate({
        rules: {
           firstName: "required",
           lastName: "required",
        },
        messages: {
            firstName: "FirstName is required",
            lastName: "LastName is required",
        },
        errorPlacement: function(error, element) {
            // error.insertAfter("#some");
            error.insertAfter(element.siblings("span"));
        }
    });
    $("#submit").click(function(){
    $("form").valid();
});

});
function validateAddUser(){
    $.ajax({
           type: "POST",
           url: "validateAddNewUser.php",                  
           data: $("#userForm").serialize(),
           success: function(msg){
               if(msg)
               {
                   $('#messageConatiner').html(msg);
               }
               else
               {
                   $('#messageConatiner').html(msg);
               }
           }   
     });
}

HTML Code

<div id="messageConatiner"></div>
<div id="formtb">
<form action="validateAddNewUser.php" method="POST" id="userForm">
<table width="100%" border="0" cellspacing="6" cellpadding="1"
    class="tabcont">
    <tr>
        <td width="47%" align="right">
            *First Name:
        </td>
        <td width="53%">
            <input type="text" id="firstname" name="firstName"/>
            <br />
            <span></span>
        </td>
    </tr>

    <tr>
        <td align="right">
            * Last Name:
        </td>
        <td>
            <input type="text" id="lastname" name="lastName"/>
            <br />
            <span></span>
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input name="addNewUser" type="button" class="submit" id="submit" value="Submit" onclick="validateAddUser();" />
        </td>
    </tr>
</table>
</form>
</div>

Answer 1

You need to call your validateAddUser() function in: (and remove it from onclick)

$.validator.setDefaults({
    submitHandler: function() { 
        validateAddUser();
    }
});