How to place JQuery error label dynamically after validating from server

Question

I am working on signup form. I've validated the fields for required, minlength etc, and placed validate error message before an element like this:

$('#register').validate(
{
    rules: 
    {
        username: 
        {
            required: true,
            minlength: 6
        },
        email: 
        {
            required: true,
            email: true
        },
        password: 
        {
            required: true,
            minlength: 8
        },
        confirmPassword: 
        {
            required: true,
            equalTo: '#password'
        }
    },
    messages: 
    {
        username:
        {
            required: 'Please enter username',
            minlength: 'Username too short'
        },
        email: 
        {
            required: 'Please enter email',
            email: 'Invalid E-Mail'
        },
        password:
        {
            required: 'Please enter password',
            minlength:'Password too short'
        },
        confirmPassword: 
        {
            required: 'Please provide password',
            equalTo: 'Passwords don\'t match'
        }
    },
    errorPlacement: function(error, element)
    {
        error.insertBefore(element);
    }
});

All is fine while client side validation, but I've to check for the server side validation too, like username duplication, email duplication... So if username already exists, and I've to place validate error message before an element again, then how it would be? I've done all ajax, request and php/mysql coding and returning error message. Just I've to display before an element with same style as jquery validating do.

Answer 1

You can add custom validation functions to each element. like for example say you need to add ajax validation to "username" field, this can be done as follows

$.validator.addMethod("validateUserName", function(val, element) {

    $.ajax({
        type : "post",
        async: false,
        url : YOUR_URL,
        data : {'username': val},
        dataType : 'json',
        error : function(jqXHR, textStatus, errorThrown){
            //alert("some error occured while submitting the form");
            return false;
        },
        success : function(  response,  textStatus,  jqXHR ){
            //Assuming you return true in server reply
            if( response.status == true ){
                //Username valid
                return true;
            } else {
                //Invalid Username
                return false;
            }
        }
    });
}, "Username Already exists.");

And your validation js will look somehting like this

$('#register').validate(
{
    rules: 
    {
        username: 
        {
            required: true,
            minlength: 6,
            validateUserName: true,
        },
 .....

So now when there is a repeat username, the custom error "Username Already exists." will be shown in its error label.

Answer 2

Here, It worked. Please correct your code, so I should mark it as right answer.

var isSuccess ;
$.validator.addMethod('validateUserName', function(val, element)
{
    $.ajax(
    {
     type : 'post',
     async: false,
     url :  'include/validateUser.php',
     data : {'username': val},
     dataType : 'json',
     error : function(jqXHR, textStatus, errorThrown)
     {
        alert('some error occured while submitting the form');
     },
     success : function(response,  textStatus,  jqXHR )
     {
        isSuccess = response ;
     }
    });
   return isSuccess ;
}, 'Username Already exists.');