validation errorlist comes on second submit / click of form

Question

I am using ASP.NET MVC with jquery and jquery validation.

I have created one page that contains some entries name and address and etc...

On submit click I want to validate the details as I have given in view model as required field.

All running fine, validation fire successfully.

I want to get all the error list of the required fields.

I am getting it like this:

var validator = $("#formname").validate();

for (var i = 0; i < validator.errorList.length; i++) {
    console.log(validator.errorList[i].message);
}

All running fine here as well but the problem I am facing here is I got the errorList on second click / submit not on first click.

I want all the errorList on first click / submit.

Why it is coming on second click I don't understand?

Please who has done this issue or solved it, help me to solve this.

Any help will be appreciated.

My code example:

 $('#formname').submit(function () {
    $.validator.unobtrusive.parse($('#formname'));
    var $form1 = $('#workoerderDetails');

//Here I try to get all the error list starts
    var validator = $("#formname").validate();

        for (var i = 0; i < validator.errorList.length; i++) {
            console.log(validator.errorList[i].message);
        }
//Here I try to get all the error list ends

    if ($form1.valid()) {
    //my code if no any validation fire
    }
    else{
    return false;
    }
        });

$form1 is running perfectly fine but I want to get all the error list from that so I use validator variable where I get all the errorlist in for loop but it gives me on second submit / click.

Phelloderm

Where did you wrote the click event? – Consolidate

Are you also using the Unobtrusive Validation plugin? If so, you cannot call the .validate() method since the Unobtrusive plugin is already doing that automatically. Your instance will always be ignored.... this may explain the weird timing of the click event, although we can't see enough code to know that either. – Peta

@ABUdhay I have call form submit , on button click but using jquery form name submit. like $("#formname").submit(); Here inside the function I checked the validate. – Phelloderm

@Peta I need to check that may be you are right. Thanks for response. – Phelloderm

@Peta so is there any way to get all the coming errors list from Unobtrusive validate? I have updated the question and set the example please now suggest me what do I do? – Phelloderm

Answer 1

This is accidentally I don't know but I am giving my own fifth question's answer.

var settings = $.data($('#formname')[0], 'validator').settings;

             $("#formname").bind("invalid-form.validate", function (form, validator) {
                 var errors = validator.numberOfInvalids();
                 var message = "Please fix these " + errors + " errors." ;
                 if (validator.errorList.length > 0) {
                     for (var x = 0; x < validator.errorList.length; x++) {
                         message += "<br/>\u25CF " + validator.errorList[x].message;
                     }
                     $("#errorList").show();
                     $("#errorList").html("");
                     $("#errorList").html(message);
                 }
                 else {
                     $("#errorList").hide();
                     $("#errorList").html("");
                 }

             });

             settings.submitHandler = function (form) {
                 if (confirm("Are you sure you wish to submit"))
                     form.submit();
             };

Thanks to this awesome article codeproject.

Thanks to all the users who has responded very quickly.

Phelloderm