Dynamic jQuery Validate error messages with AddMethod based on the element

Question

Let's say I have a custom AddMethod to jQuery Validate like:

$.validator.addMethod('min-length', function (val, element) {
    // do stuff

// the error message here needs to be dynamic
}, 'The field cannot be less than than '
     + element.attr('data-min') + // it is within the closure, but it can't grab it
   ' length.');

I can't figure out a way to get the element variable in question, and get any values from it. What am I missing here?

Answer 1

From looking at the validator source code, I think this should do it:

$.validator.addMethod('min-length', function (val, element) {
    return this.optional(element) || val.length >= $(element).data('min');
}, function(params, element) {
    return 'The field cannot be less than than ' + $(element).data('min') + ' length.';
});

In your original code, the message string is NOT within the closure; the closure is the 2nd argument of addMethod , and the error message is the 3rd argument.

Answer 2

First of all, I appreciate Barmar answer.

If you just think , you can use any of the jquery validation message with it's param value , you can call simply the message instances.

Here is the code

            jQuery.validator.addMethod("custom_min", function(value, element, param) {
                value = replaceAll(value, ',' , '');
                return this.optional( element ) || value >= param;
            },jQuery.validator.messages.min );  

In jquery validation

jQuery('#form_id').validate({
   rules: {
    'field_name': {
       required: true,
       number: true,
       custom_min: 1000
   }
});

So if you enter something less than 1000. it will throw you error message,"Please enter value greater than 1000(the amount you put in the validation)".This method will be faster if your validation needs any modification of any current method or you are developing it with multiple language.

Answer 3

If Barmar's answer doesn't work for you, it is probably because your settings for the element already contains an error message(set from the server in asp.net MVC for example)

So the jQuery.validate code will ignore the new default set by the second parameter to $.validator.addMethod

A way around it is to do the following:

$.validator.addMethod('min-length', function (val, element) {
   this.settings.messages[element.name]['min-length'] = function () { return 'put your custom message here'; };

   return this.optional(element) || val.length >= $(element).data('min');
});

Answer 4

Found this semi by accident. My messages are very dynamic depending on the result. so right before I call validate I add an attribute data-msg="My custom message" to the element. Validator will pick that up:

err_msg = 'My custom message';
$('#my_element_id').attr('data-msg', err_msg);
$('#my_form_id').validate().element('input[name=\'my_element_name\'');

found some code references under customDataMessage in jquery.validate.js

Answer 5

late to the party here, but this seems to work for me:

jQuery.validator.addMethod("minDate", function(value, element, param) {
    var inputDate = new Date(value);
    return (inputDate >= param)
    }, function(param, element) {
        return 'Enter a date greater than or equal to ' + $.datepicker.formatDate("M d, yy", new Date(param));
});

where the minDate value has previously been set on the control to validate something like this:

$('form:first').validate({
    rules: {
        "date-filed": {
            minDate: new Date(2000,0,0)
        },
...

Answer 6

code:

    $.validator.addMethod("strongePassword", function(value) {
        return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
    },"The password must contain at least 1 number, at least 1 lower case letter, and at least 1 upper case letter"); 
        

Uses to :

  rules: { 
        password: {
                    required: !0,
                    strongePassword: true
                 },
     }