Display Error Message in a separate div using jQuery validation

Question

I am using jQuery validation and I am wanting to display the error message in a div <div class="alert alert-error" id="errorContainer"> The default of showing below the forms does not work with my form design.

The validation script is linked to the page I have the form on and it looks like:

    $(function validate() {

    var rules = {
                rules: {
                    full_name: {
                        minlength: 2,
                        maxlength: 50,
                        required: true
                    },
                    address: {
                        minlength: 5,
                        required: true
                    },
                    city: {
                        minlength: 2,
                        required: true
                    },
                    state: {
                        minlength: 2,
                        maxlength: 2,
                        required: true
                    },
                    zip: {
                        minlength:5, 
                        maxlength:5,
                        required: true
                    },
                    phone: {
                        required: true,
                        phoneUS: true
                    },
                    phone_other: {
                        required: true,
                        phoneUS: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    date_to_start: {
                        required: true
                    },
                    ssn: {
                        required: true,
                        ssn: true,
                    },
                    salary: {
                        required: true
                    }

                }
            };

        var validationObj = $.extend (rules, Application.validationRules);

        $('#employment-application').validate(validationObj);

});

Now I did try changing $('#employment-application').validate(validationObj); to the code below as well as tried adding it to the bottom of the page I have the form on, both gave negative results. The script seems to add style="display:none;" to the errorContainer and does not load any errors anywhere.

(tried changing $('#employment-application').validate(validationObj); to the below)

$("#employment-application").validate({
        errorContainer: "#errorContainer", 
        errorLabelContainer: "#errorContainer", 
        errorElement: "li"
    })

So re-cap, I am wanting to use jQuery Form Validation and display the error messages received in a separate div because the default does not work with my form design.

You have the .validate() method inside of a function named validate(). Then what calls the function? Typically, the .validate() method simply goes inside of a DOM ready event handler. — Sparky
– Sparky, Commented Jan 19, 2015 at 18:58

Matt Harrison · Accepted Answer · 2015-01-20 08:33:37Z

21

You can use the errorPlacement option to pass a callback like this: http://jsfiddle.net/cMhQ7/

I've used a standard of the div id being the input element's name concatenated with a _validate suffix but you can change as you wish.

HTML

<form id="employment-application" method="post">
    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>

Javascript

$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});

edited Jan 20, 2015 at 8:33

answered Jun 10, 2013 at 10:39

Matt Harrison

13.6k7 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user2371301 Over a year ago

Well this doesn't hide the div anymore so we must be getting closer. It doesn't however display the errors. Is it because it's in a linked file?

user2371301 Over a year ago

Yes your JSFiddle is working. but once I put it into my script it does nothing. Here take a look: green-panda.com/website/panda/employment/js/demo/validation.js

user2371301 Over a year ago

Ok so, I copied your entire script and replaced it with mine. Must have had something unforeseen on my script that was preventing this from working. Haven't tried it with multiple input's yet. I'll approve answer once I have.

user2371301 Over a year ago

Ok everything is working just the way I was wanting it to. Thank you so much:)

Bhavin Rana Over a year ago

is there any way that we can put all msg in 1 div ? error.appendTo($("#div_msgsvalidate")); will add msg each time i Click submit.

|

Antonio AB · Accepted Answer · 2016-01-14 12:37:24Z

5

If only want to change the default placement to certain elements, you can use this improvement. This implements the default behaviour of validate script

    errorPlacement: function(error, element){
        var name    = $(element).attr("name");
        var $obj    = $("#" + name + "_validate");
        if($obj.length){
            error.appendTo($obj);
        }
        else {
            error.insertAfter(element);
        }
    },

answered Jan 14, 2016 at 12:37

Antonio AB

511 silver badge1 bronze badge

Collectives™ on Stack Overflow

Display Error Message in a separate div using jQuery validation

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related