How to hide error messages and have one error message jQuery validate?

Question

I'm using the jQuery Validate Plugin and I want to be able to hide the error messages next to my inputs and have a main error message at the bottom, I have this working kind of but the error messages are showing next to my input fields. (Obviously I would clean up the styling if i was using it).

As you can see at the bottom it is telling me there are 4 errors see details below.. I want this to stay but not the error messages and styling above?

$( ".form-group-rules" ).validate({ 
    rules: {
        rule_name: {
            required: true
        },
        rule_desc: {
            required: false
        },
        rule_type: {
            required: true
        },  
        vali_type: {
            required: true
        },
        tran_type: {
            required: true
        },
        vali_fields: {
            required: true
        },
        acct_sel: {
            required: true
        }               
    },   
  messages: {
    rule_name: "Please enter a rule name",
    rule_type: "Please select a rule type", 
    vali_fields: "Please select a validation field",
    tran_type: "Please select at least 1 transaction type",
    vali_type: "Please select a valiation type",
    acct_sel: "Please select at least 1 account"
  },
  showErrors: function(errorMap, errorList) {
    $(".error-container").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }    
});

Check this question http://stackoverflow.com/questions/13716649/using-jquery-validate-plugin-to-output-a-single-error-message-for-multiple-field — Pugazh, Apr 06 '16 at 10:15

score 1 · Answer 1 · answered Apr 06 '16 at 10:20

1

May be use the Validator method

errorPlacement: function(error,element) {
    return true;
  }

It will not append the error to the inputs.

answered Apr 06 '16 at 10:20

WhoAmI

501
3
13

This is unnecessary additional code, because the OP is programmatically putting these messages in place with `this.defaultShowErrors()`. – Sparky Apr 06 '16 at 18:50

score 0 · Answer 2 · answered Apr 06 '16 at 10:14

0

You can hide the error messages with CSS:

span.error {
  display: none;
}

answered Apr 06 '16 at 10:14

Gofilord

6,239
4
27
43

Sparky · Answer 3 · 2016-04-06T22:27:51.547

Normally, showErrors will automatically suppress the default messages next to each input element.

You're creating your own issue because .defaultShowErrors() is the method for putting back the default messages.

Simply remove this.defaultShowErrors()...

showErrors: function(errorMap, errorList) {
    $(".error-container").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();  // <- REMOVE THIS LINE
}

DEMO: http://jsfiddle.net/jmdnxedq/

How to hide error messages and have one error message jQuery validate?

3 Answers3