Jquery Validation, Show Custom message with value from id

Question

I Use jquery.validate.js for field validation. Its display error messages as per declare in .js file for appropriate field.

I use this code for custom validation for email field.

 <script type="text/javascript">
    $().ready(function() {
        $("#formcustomplan").validate({
            email: {
                required: true,
                email: true
            },          
            messages: {
                email: "Email is required in valid format"
            }
        });
    });
</script>

Its display message like that "Email is required in valid format" But I want that error message fetch email id and display it in error message. (Ex. if I enter test.com in email box. it should display "test.com is not valid email" in error message)

Here is Fiddle

Answer 1

JQuery Validate actually supports functions as messages directly, so you don't have to do anything super hacky to make this work. It is not well documented but you can do this:

messages: {
    email: {
        email: function (params, element) {
            return '"'+$(element).val()+'" is not a valid value';
        }
    }
}

Quote from the docs:

Each message can be a String or a Callback. The callback is called in the scope of the validator, with the rule’s parameters as the first argument and the element as the second, and must return a String to display as the message.

Working example: http://jsfiddle.net/ryleyb/XUM8k/11/

Answer 2

You can reset the default email validation message by using:

$.validator.messages.email = "Your custom message for email field"

In your case, you can prepend the new value from user's input to the custom message. Here is the trick using keyup:

$('.email').keyup(function () {
    $.validator.messages.email = $('.email').val() + ' is not valid email';
});

$("#formcustomplan").validate({
    email: {
        required: true,
        email: true
    }
});

Updated Fiddle