Custom Validation Method and Messages

Question

I working on an ASP.NET MVC website. I'm trying to add custom validations to some fields. The validations are firing as they should. However, I've also added custom error messages that I want displayed. These custom messages are not being displayed.

What am I missing?

<input class="text-box single-line checkAmount" 
      data-val="true" data-val-number="The field Amount From must be a number." 
      data-val-range="Must be within range -9999999999999999.99 and 9999999999999999.99." 
      data-val-range-max="1E+16" data-val-range-min="-1E+16" 
      data-val-required="Required." id="AmountFrom" name="AmountFrom" 
      type="text" value="0.00">

<script type="text/javascript">
    $(document).ready(function() {
        $.validator.addMethod('checkAmount', function(value, element) {
            return false; //testing
        }, 'this displays instead');
        $('form').validate({
            rules: {
                AmountFrom: {
                    checkAmount: true
                },
                AmountTo: {
                    checkAmount: true
                }
            },
            messages: {
                AmountFrom: {
                    checkAmount: 'Amount must be greater then zero when account code selected.'
                },
                AmountTo: {
                    checkAmount: 'Amount must be greater then zero when account code selected.'
                }
            }
        });
    });
</script>

So after walking through the validation code this is what I've found. When I call the following:

$.validator.addMethod('checkAmount', function (value, element) {
    //my code from above
});

$('form').validate({
    rules: {
        //my rules from above
    },
    messages: {
        //my messages from above
    }
});

The $('form').validate is called but it appears the the messages are never applied. One reason I believe this is true is because when the validate plugin fires the following is what happens in the code:

$.extend($.fn, {
    validate: function(options){
        if(!this.length) {
            if(options && options.debug && window.console){
                console.warn( "Nothing selected, can't validate, returning nothing." );
            }
            return;
        }

        var validator = $.data( this[ 0 ], "validator" );
        if ( validator ) {
            return validator;
        }
        //REMOVED REMAING CODE FOR READABILITY
    }
});

So when it hits the line if(validator) { return validator} it returns.

Another reason is if I type $('form').validate().settings.messages in the Chrome's dev tool I get the messages object, one of which is text_fkAccountCodeFrom. However, when I expand this object it does not have the custom message listed. When validation run one of the internal calls is to a function called defaultMessage, which calls another function called this.customMessage(element.name, method). The customMessage function does the following:

customMessage: function(name, method){
    var m = this.settings.messages[name];
    return m && (m.constructor === String ? m : m[method];
}

When this code runs it's what would pull the custom message. However, since the messages are never being set it pulls the default which, in my addMethod would display this displays instead.

Now if I do this:

$('form').validate().settings.messages.text_fkAccountCodeFrom = {checkAmount:'Required when Amount greater then zero.'};

I get my custom message.

So I'm not sure if it's a bug or the way things are loaded due to MVC and using unobtrusive?

@OIS Yes, jquery.validate.js the default that comes with ASP.NET MVC but MVC wires up validation using model annotations... which were not included in this post. — Brad C
– Brad C, Commented Jul 8, 2015 at 20:49
@OIS Yes, this is the jquery.validate.js. However, we are pulling it from the Microsoft CDN. So we are using jquery 1.11.0, jquery.validate.js 1.11.1, additional-methods.js 1.11.1 & jquery.validate.unobtrusive MVC 5 — dklingman
– dklingman, Commented Jul 9, 2015 at 11:57
Please don't add solutions in the question itself. If you managed to find the solution yourself, you could even self answer your question + accept it. I have removed the solution part and also the Solved message from the title as it is not required. I have also removed the tag name from the title and improved formatting a bit. — Harry
– Harry, Commented Jul 11, 2015 at 16:33
@Harry Ok, sorry about that and thank you. I don't typically ask a lot, so I wasn't sure how to go about it. Again thank you. — dklingman
– dklingman, Commented Jul 13, 2015 at 11:30

dklingman · Accepted Answer · 2015-07-13 11:43:11Z

1

So after some more searching, reading of the jquery validator api documentation and understanding how the mvc unobtrusive works I finally figured out what I needed to do.

In my custom validation method all I needed to do was the following.

$('form').validate().showErrors({
    'text_fkAccountCodeTo': 'Required when Amount greater then zero.'
});

answered Jul 13, 2015 at 11:43

dklingman

2361 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

Custom Validation Method and Messages

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related