the custom message are not dsplayed in jquery validate plugin

Question

I have a form which does validation with the help of Jquery validate plugin.But i can't make the custom message to display for the necessary field.Could some one help me what i am doing wrong here.

    $('#ph_form').validate({
            'rules':{
            'firstname':{
                'required':true,
                'lettersonly': true
            },

            'city':{
                'required':true,
                'lettersonly': true
            },

            },
            'errorClass': "error",
                'errorElement': "none",
            'errorPlacement': function(error, element) {
                element.parent().addClass('error');
                },
            'messages':{
                'firstname': 'Please enter a valid email',
                'city': 'Please enter a valid city',

            },
            submitHandler: function(form) {
                $.ajax({
                    /*some code */
                }            
                });

            }
            });

Answer 1

You can try adding error.insertAfter(element);

'messages':{
                'firstname': 'Please enter a valid email',
                'city': 'Please enter a valid city',

            },
'errorClass': "error",
'errorElement': "none",
'errorPlacement': function(error, element) {
                         element.parent().addClass('error');
                         error.insertAfter(element); //Try adding this to your function
                   },

Hope this link might be helpful to you.Its clearly specified in the errorPlacement section

http://jqueryvalidation.org/validate/