I am new with jQuery validation and learing so I don't have any idea about this. Now I am using jQuery Validate plugin and want to display error message inside div element. I have created div for every error message.

For example I have Name input field and want to display error message inside nameError div.

<div>
    <label for="name">Name</label>
    <input id='name' name="name" value="" />
</div>
<div id="nameError">
    <!-- Display Name Error Here  -->
</div>

Is it possible for jQuery Validation Plugin? I have no idea that why I am posting here to get help from you.

MY JQUERY CODE IS:

$(function () {
    $.validator.addMethod("regex", function (value, element, regexpr) {
        return regexpr.test(value);
    }, "Please enter a valid name.");

    $("#myForm").validate({
        rules: {
            name: {
                required: true,
                regex: /^[A-Za-z]+$/
            }
        }
    });
});

MY JSFIIDLE

Thanks.

I am new with jQuery validation and learing so I don't have any idea about this. Now I am using jQuery Validate plugin and want to display error message inside div element. I have created div for every error message.

For example I have Name input field and want to display error message inside nameError div.

<div>
    <label for="name">Name</label>
    <input id='name' name="name" value="" />
</div>
<div id="nameError">
    <!-- Display Name Error Here  -->
</div>

Is it possible for jQuery Validation Plugin? I have no idea that why I am posting here to get help from you.

MY JQUERY CODE IS:

$(function () {
    $.validator.addMethod("regex", function (value, element, regexpr) {
        return regexpr.test(value);
    }, "Please enter a valid name.");

    $("#myForm").validate({
        rules: {
            name: {
                required: true,
                regex: /^[A-Za-z]+$/
            }
        }
    });
});

MY JSFIIDLE

Thanks.

• javascript
• jquery
• jquery-validate

• 1 Have you tried reading the documentation yet? – Sparky Commented Apr 11, 2014 at 14:33

3 Answers 3

Here's a quick sample: http://jsfiddle.net/4PuJL/7/

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo('#nameError');
    }
});

You may add a check in errorPlacement handler like below: Please note that errorPlacement function is called for each error, if you need more handling on error message, please check for invalidHandler

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        if (element.attr("name") == "name" )  //Id of input field
            error.appendTo('#nameError');
        if (element.attr("name") == "anotherInputField" )  //Id of input field
            error.appendTo('#anotherInputFieldError');
    }
});

check the following link

My Fiddle

HTML :

<form>
    <input type="text" required pattern="/^[A-Za-z]+$/" >
        <input type="submit" value="search">
</form>