jQuery Validation: $.data($('form')[0], 'validator').settings returns undefined

Question

I have an ASP.Net MVC Project and I am using unobtrusive jQuery Validation. to add validation when an element loses focus, I am calling

$(document).ready(function () {
    // enable validation when an input loses focus.
    var settngs = $.data($('form')[0], 'validator').settings;
    settngs.onfocusout = function (element) { $(element).valid(); };
});

This is working on one project while it throws this exception on another project because $.data($('form')[0], 'validator') returns undefined ($.data($('form')[0]) returns an empty object):

Uncaught TypeError: Cannot read property 'settings' of undefined

However, jQuery Validation is working fine when the submit button is pressed, so everything else should be set up correctly.

I am loading these scripts at the end of the body tag: (the function listed above is in customvalidations.js so it should execute after the validator is applied to the form)

<script src="/Staffing/Scripts/jquery-2.1.1.js"></script>
<script src="/Staffing/Scripts/globalize/globalize.js"></script>
<script src="/Staffing/Scripts/globalize/cultures/globalize.culture.de-DE.js"></script>
<script src="/Staffing/Scripts/bootstrap.js"></script>
<script src="/Staffing/Scripts/respond.js"></script>
<script src="/Staffing/Scripts/bootstrap-datepicker.js"></script>
<script src="/Staffing/Scripts/bootstrap-datepicker-globalize.js"></script>
<script src="/Staffing/Scripts/locales/bootstrap-datepicker.de.js"></script>
<script src="/Staffing/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Staffing/Scripts/jquery.validate.js"></script>
<script src="/Staffing/Scripts/jquery.validate.globalize.js"></script>
<script src="/Staffing/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Staffing/Scripts/localization/messages_de.js"></script>
<script src="/Staffing/Scripts/customvalidations.js"></script>
<script src="/Staffing/Scripts/uiadditions.js"></script>
<script src="/Staffing/Scripts/default.js"></script>

Solution: This is the code that works:

$(document).ready(function () {
    // enable validation when an input loses focus.
    var allForms = $('form');
    $.each(allForms, function (key, value) {
        var val = $.data(value, 'validator');
        if (val != undefined) {
            var settngs = val.settings;
            settngs.onfocusout = function (element) { $(element).valid(); };
        }});
});

The problem was that the new Validation plugin checks if there are any elements present which should be validated and I had 2 forms on the same page with the first form not having any validated input elements.

Answer 1

Doing this $.validator.unobtrusive.parse($("#base-modal form")); resolved my issue

Answer 2

I just upgraded to Microsoft.jQuery.Unobtrusive.Validation.3.2.0 package. I came across the same problem. Is it possible that you also upgraded to the same version?

If so, I might offer my two cents :). After a bit of debugging I noticed that the following change was made in jquery.validate.unobtrusive.js:

Previous version:

    var $forms = $(selector)
        .parents("form")
        .andSelf()
        .add($(selector).find("form"))
        .filter("form");

New version:

        $forms = $selector.parents()
                          .addBack()
                          .filter("form")
                          .add($selector.find("form"))
                          .has("[data-val=true]"); // key point!

The key seems to be: the has("[data-val=true]"). That is, if your form doesn't have any descendents (like an input element) with that attribute value, it will not be parsed by the validation helper and no 'validator' data will get assigned to that form element. You'll then get this 'undefined' error if you try to access the validator of that form at a later stage.

In my case, the forms for which this was happening didn't actually use any validation, hence they didn't have this attribute. I was then able to change my custom validator logic to first check if the validator exists before changing validator settings.

Hope that helps.

Answer 3

This can happen also you you didn't call validate() on your form as such:

$("#your_form").validate();

In my case, I had no form with the id "your_form" on my page hence causing this error when trying to add rules.