jQuery Validation Plugin - show error messages and error summary [duplicate]

Question

I need your help to solve a problem. I am using jQuery Validation plugin to validate the forms and I want to display validation summary as well as validation messages with each invalid field. I tried the following code but i ran into 2 problems;

PROBLEM 1: Error messages from invalid fields are not showing.

PROBLEM 2: The error summary is displaying the list of all errors but without the name of the fields. I think the plugin uses the 'errorList' array which holds both the name of the element as well as its error message, but i have no idea how to use this. Ref: https://jqueryvalidation.org/validate

HTML

<form id="theForm" class="formContainer">
   <div id="errorSummary">
      <div class="summaryTitle">
         <!-- FOR ERROR TITLE -->
      </div>
      <ul>
         <!-- FOR ERROR LIST -->
      </ul>
   </div>
   <div class="formbox">
    <label>First Name:</label>
    <input type="text" name="FirstName" class="required">       
   </div>
   <div class="formbox">
    <label>Last Name:</label>
    <input type="text" name="Last Name" class="required">       
   </div>
   <button type="Submit" id="submitButton">Submit</button>
</form>

SCRIPT

<script>
$(document).ready(function(){
   $("#theForm").validate({
     debug:true,
        errorLabelContainer: "#errorSummary ul",
        wrapper: "li",
        invalidHandler: function(event, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {                       
                  var message = errors == 1
                    ? '<h4>Submission Failed</h4>You missed 1 field. It has been highlighted'
                    : '<h4>Submission Failed</h4>You missed ' + errors + ' fields. They have been highlighted';
                  $("#errorSummary div.summaryTitle").html(message);
                  $("#errorSummary").show();
                } else {
                  $("#errorSummary").hide();
                }
        },
   });
});
</script>

PLEASE NOTE: I am already using errorPlacement property of the plugin for other use

"PLEASE NOTE: I am already using errorPlacement property of the plugin for other use" ~ since that particular function is solely responsible for placing the error messages next to each field, don't you think that may be the root cause of your missing messages, and something you should be showing us here? — Sparky
– Sparky, Commented Dec 9, 2017 at 17:35
I also think you should be using showErrors instead of invalidHandler. Notice that this.defaultShowErrors() will cause the default messages to appear next to each field; unless you've broken that by improperly over-riding the errorPlacement callback. See: jqueryvalidation.org/validate/#showerrors — Sparky
– Sparky, Commented Dec 9, 2017 at 17:37
@Sparky thanks friend... i will sure look into 'errorplacment'. i tried 'showerror' but due to my low skills in scripting.. i failed to use it to show both the element name and error msg — user1231648
– user1231648, Commented Dec 9, 2017 at 17:42
i will look into your reference link. can u place your message in form of answer so that i can mark if it solves my problem. — user1231648
– user1231648, Commented Dec 9, 2017 at 18:01

FRANCISCO KK · Accepted Answer · 2017-12-09 17:41:42Z

0

this is how i do it in angular.js. include angular-validator.js and just use the input field like this

<input class="form-control" type="number" validate-on="blur" required required-message="'required'" readonly>

where required-message is the message you want to display

Hope it works for you

answered Dec 9, 2017 at 17:41

FRANCISCO KK

5831 gold badge11 silver badges18 bronze badges

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

5 Comments

user1231648 Over a year ago

thanks friend, i will sure look into this... seeing your simple code it seems far better option than that plugin

FRANCISCO KK Over a year ago

you can read on it here github.com/turinggroup/angular-validator

Sparky Over a year ago

@user1231648, first off, that's just a different plugin. Secondly, the jQuery Validate plugin works practically the same, and this answer does not even come close to solving your question.

FRANCISCO KK Over a year ago

@Sparky it suppose to be an alternative to achieving the same result. i stated it categorically in the answer. i don't get why you should vote it down

Sparky Over a year ago

Suggesting an alternative plugin is not a good answer, but it does not solve the original problem in either case. The OP wants his error messages in a detailed summary as well as next to each field. Your answer only provides for the latter.

Collectives™ on Stack Overflow

jQuery Validation Plugin - show error messages and error summary [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related