MVC4 custom unobtrusive validator isn't working

Question

not sure what is wrong. Syntax seems correct.... but it still doesn't fire on client side. If I submit the form, I get server side validation, client side nothing...

Here is the code that is on the page:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript">
    // we add a custom jquery validation method
    (function ($) {
        $.validator.addMethod('additive', function (value, element, params) {
        //just return false to test it.
        return false;
    });
    // and an unobtrusive adapter
    $.validator.unobtrusive.adapters.add("additive", ["field2", "field3", "field4"], function (options) {
        var params = {
            field2: options.params.field2,
            field3: options.params.field3,
            field4: options.params.field4
        };
        options.rules['additive'] = params;
        if (options.message) {
            options.messages['additive'] = options.message;
        }
    });
}) (jQuery);
</script>

Here is the part that is on the validator that is related to client side (IClientValidatable):

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            ModelClientValidationRule rule = new ModelClientValidationRule
            {
                ValidationType = "additive",
                ErrorMessage = "ERROR MESSAGE"
            };

            rule.ValidationParameters.Add("field2", propName2);
            rule.ValidationParameters.Add("field3", propName3);
            rule.ValidationParameters.Add("field4", propName4);

            yield return rule;
        }

The model is decorated as following:

[SumValidation("OtherField2...")]
public int MyField { get; set; }

When field renders, it is all there, all the stuff from the server side in terms of data-xxx attributes. Just this specific client validation does not fire. Anyone see what I'm missing?

Lalita

Ok something to ensure, even though it may seem like a duh of course i did that moment, is that javascript is enabled in the client browser you are testing on. Also ensure that the jQuery libraries are all accounted for. Other than that it looks correct. – Postprandial

javascript is enabled, other validation works on the client side. I apologize if that wasn't clear. Just this one is not doing anything. I'm assuming all jQuery libraries are accounted since all other validation is working in unobtrusive way. – Lalita

I tried doing a manual $('form').valid(); from a separate spot on a page. All validators fire except this one, which is just something I can't explain. – Lalita

Answer 1

figured it out. If anyone runs into this. Added custom validation too late on the page. After I moved my custom validation javascript to the head section of the _Layout.cshtml it started to work.

So if your script looks right, good place to check.

Another work around is to run $.validator.unobtrusive.parse('form'); which reloads all the validators.

Lalita

Thank you so much. You saved me a lot of time. – Swordplay