CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-validate
Mr.M
Mr.M

Reputation: 1490

jQuery validation no of error count number

I am currently working on jQuery validation; the current code I have was working fine, I am getting the number of error count. But I am not getting when the user enter the value in the corresponding field the error count has to detect one by one.

For example if I have 5 fields are not entered by the user it should say You have missed 5 fields. Please fill before submitted when all fields are entered the error field has to disable. And I need to highlight the label of the radio input when nothing is selected. Moreover I am trying to change my mandatory star from black to red. That is also not happening.

Here is my jQuery code.

$(document).ready(function () {
$("#basicForm").validate({

    invalidHandler: function(event, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
          var message = errors == 1
            ? 'You missed 1 field. It has been highlighted'
            : 'You have missed ' + errors + ' fields. Please fill before submitted.';
          $("#error_message").html(message);
          $(".error_msge").show();
          $("div.error").show();
            $("#error_message").addClass("error_msge");
        } else {
          $("div.error").hide();
            $("#error_message").removeClass("error_msge");
        }
      },

    errorPlacement: function(error, element) {
    },
    onkeyup: false,
    highlight: function(element) {
        $(element).addClass('errRed');
        $(element).addClass('text-error-red');
    },
    unhighlight: function(element) {
        $(element).removeClass('errRed');
        $(element).removeClass('text-error-red');
    },
    rules: {
        txt_Fname: "required",
        txt_lname: "required",
        txt_Mfname: "required",
        txt_Mlname: "required",
        txt_Pptnum: "required",
        txt_Pi: "required",
        txt_dob: "required",
        txt_Idt:"required",
        txt_Epdt:"required",
        sel_ms:"required",
        ipt_nation:"required",
        ipt_countryres:"required",            
        sel_rg:"required",
        sel_sem:"required",
        ipt_acdem:"required",
        gender:"required"
    }
});
});

Here is the Fiddle link.

Upvotes: 0

Views: 2795

Answers (1)

Sparky
Sparky

Reputation: 98748

You have lots of issues and I strongly recommend that you review the documentation.

But I am not getting when the user enter the value in the corresponding field the error count has to detect one by one for example If I have 5 fields are not entered by the user it should say You have missed 5 fields.

You have used the wrong option. The invalidHandler only fires on an invalid form, so when there are zero errors your function will never be called and it will be stuck on show "1 error". Use the showErrors option instead.

    showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();
        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
            $("#error_message").html(message);
            $(".error_msge").show();
            //$("div.error").show(); // superfluous
            //$("#error_message").addClass("error_msge"); // superfluous
        } else {
            $(".error_msge").hide();
            //$("div.error").hide(); // superfluous
            //$("#error_message").removeClass("error_msge"); // superfluous

        }
        // ensures that highlight/unhighlight will function
        this.defaultShowErrors();
    },

Please fill before submitted. when all fields are entered the error field has to disable.

You forgot to hide the error message box when there are no errors: $(".error_msge").hide() was missing

And I need to highlight the label of the radio input when nothing is selected.

You need a conditional inside the highlight and unhighlight functions that will take care of this when the element is a radio.

    highlight: function (element) {
        if ($(element).is(':radio')) {
            $(element).siblings('label').addClass('errRed');
        } else {
            $(element).addClass('errRed');
        }
        $(element).prev('span.required-star').addClass('text-error-red').removeClass('text-error-black');
    },
    unhighlight: function (element) {
        if ($(element).is(':radio')) {
            $(element).siblings('label').removeClass('errRed');
        } else {
            $(element).removeClass('errRed');
        }
        $(element).prev('span.required-star').addClass('text-error-black').removeClass('text-error-red');
    }

I also moved the code for the asterisks in here since you want them to toggle color individually.

More over I am trying to change my mandatory star from black to red.

Your CSS technique is flawed. You are trying to select everything with the "black" class and simply add a "red" class, leaving you with two classes each with a different color. Instead, you need to replace one class with the other class. Something like this...

$(".required-star").removeClass("text-error-red").addClass("text-error-black");

You need to programmatically trigger validation using the .valid() method when you use the date-picker...

$('.ipt_Field').on('change', function() {
    $("#basicForm").valid();
});

You do not need the messages option. Since you are suppressing all of the messages, it's pointless.

Also do not leave the errorPlacement function empty. Put a return false inside.

errorPlacement: function() {
    return false; // suppress error messages.
}

DEMO: http://jsfiddle.net/k5wxtmpL/

Upvotes: 2

Related Questions