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?

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.