Jquery validate - errorPlacement starting from last input

Question

I am using the jQuery Validate plugin. I want to show one by one error message at a time onclick of submit. For that, I haves used the errorPlacement callback function to replace message on a target area.

Find js Fiddle demo here

Error message starting from bottom. So last input error message is coming first on click of submit button.

$.validator.setDefaults({
    //onfocusout: true, 
    errorPlacement: function(error, element) {
        $(element).parents('#registorForm').find('.form-message').html(error); 
    },
    invalidHandler: function(form, validator) {

    },
});


$("#registorForm").validate({ 
    ignore: [],
    rules: { 
        user_title:{
            required: true,
        }, 
        first_name: {
            required: true,
            minlength: 3
        },
        middle_name: {
            required: true
        },
        last_name: {
            required: true
        },
        mobile_number:{
            required: true,
            phoneUS: true,
            minlength: 8,
            maxlength: 12,
            digits: true 
        },
        email_id: {
            required: true,
            email: true
        },
        city: {
            required: true,
            minlength: 2
        }
    },
    messages:{
        user_title:{
            required:'Your Title is required E.g. Mr., Miss., Ms.'
        },
        first_name:{
            required:'Please Enter Your First Name'
        },
        middle_name:{
            required:'Please Enter Your Middle Name'
        },
        last_name:{
            required:'Please Enter Your Last Name'
        },
        mobile_number:{
            required:'Please Enter Your Mobile Number'
        },
        email_id:{
            required:'Please Enter Your Email id'
        },
        city:{
            required:'Please Enter Your City'
        },

    } 
});

Find js Fiddle demo here

The formvalidation-plugin is an entirely different plugin. Edited tags. Thanks. — Sparky
– Sparky, Commented Feb 11, 2016 at 16:38

Community · Accepted Answer · 2017-05-23 10:30:27Z

1

There is some misunderstanding about the callback options.

The errorPlacement option is intended for adjusting the placement of all individual messages near each input element. Only the last message is showing because your code is replacing each message with the next message.

You also do not need an empty invalidHandler since that option is for firing a custom action when the form is invalid.

If you want to place the messages in another location and control how the messages are displayed within, then you need to look at other options such as showErrors, errorLabelContainer, and errorContainer.

When using the showErrors option, the errorPlacement function will automatically be suppressed. In other words, when using the showErrors option you will not get messages next to each of the elements.

Within showErrors, use the errorList argument to pick out the messages and control how you want them to display. Do not use this.defaultShowErrors() as it will effectively restore the functionality of errorPlacement.

A crude example of what you can do, but it needs some work...

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        var summary = "Your form contains " + this.numberOfInvalids() + " errors, see details above.</br>";

        $.each(errorList, function() {
            summary += " * " + this.message + "</br>";
        });

        $(".form-message").html(summary);

        // this.defaultShowErrors(); // default error placement
    }
});

DEMO: https://jsfiddle.net/p4mw594x/

More examples of showErrors:

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Feb 11, 2016 at 17:07

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

2 Comments

Ganesh Yadav Over a year ago

Thank you, I like your answer. But is it possible to show error message but input then second and so on onclick of submit?

Sparky Over a year ago

@locateganesh, yes, it is possible as evidenced by the code in the additional answers I've linked to. You simply need to access the appropriate message within the errorList object.

Collectives™ on Stack Overflow

Jquery validate - errorPlacement starting from last input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related