select2 custom error message with jQuery validation plugin

Question

When I try to validate a select2 what I get is the same text as the label

 <div class="row">
     <div class="col-sm-12">
         <div class="form-group">
             <label for="cboMetodoPago">Método de pago <span class="required"></span></label>
             <select class="form-control select2-nosearch" id="cboMetodoPago" name="cboMetodoPago" required></select>
         </div>
     </div>
 </div>

This is how I configure the plugin

    $(".formsave").validate({
        highlight: function (element) {
            jQuery(element).closest('.form-group').addClass('has-error');
        },
        success: function (element) {
            jQuery(element).closest('.form-group').removeClass('has-error');
        },
        ignore: ["input[type=hidden]"],
        onfocusout: false,
        invalidHandler: function (form, validator) {
            var error = validator.numberOfInvalids();

            if (error) {
                validator.errorList[0].element.focus();
            }
        },
        message: {
            cboMetodoPago: {
                required: "Este campo es obligatorio"
            }
       }
    });

And the text I get is the same as the label inside the form-group

Any way to replace the text with the corresponding one?

Regards

Sparky · Accepted Answer · 2017-01-29 17:32:13Z

1

The object is called messages, not message as you have it.

messages: { // <- "messages", not "message"
    cboMetodoPago: {
        required: "Este campo es obligatorio"
    }
}

Based on your usage of highlight, you should use unhighlight instead of success.

highlight: function (element) {
    jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
    jQuery(element).closest('.form-group').removeClass('has-error');
},

The success function is really meant for controlling the error message element, which is normally hidden when the element passes validation. In other words, you can leverage the error label when the element passes validation to give another message or icon, like "passed" or a green checkmark.

edited Jan 29, 2017 at 17:32

answered Jan 28, 2017 at 15:15

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

2 Comments

elchente23 Over a year ago

You're right man, it was a typo. What's the difference between success and unhighlight?. success unhighlight the controls too.

Sparky Over a year ago

@elchente23, it fires at slightly different times and it's meant to do something else entirely. See my edited answer for explanation.

Collectives™ on Stack Overflow

select2 custom error message with jQuery validation plugin

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related