Question

13

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

rated 0 times [ 18] [ 5] / answers: 1 / hits: 17797 / 10 Years ago, fri, july 4, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austonjuancarlosb

Add To Favorites

Follow

Total Points: 238

Total Questions: 89

Total Answers: 99

Location: Chad

Member since Mon, Dec 5, 2022

1 Year ago

austonjuancarlosb questions

1 TypeError: Cannot read properties of undefined (reading 'call') on Next.js

Sat, Dec 17, 22, 00:00, 1 Year ago

1 How to check if Metamask is connected after page refreshing

Sat, Feb 19, 22, 00:00, 2 Years ago

1 Slash Commands - Discord.js

Sun, Mar 14, 21, 00:00, 3 Years ago

1 How to reload Next.js page initial props without reloading the whole page

Mon, May 18, 20, 00:00, 4 Years ago

1 How can I disable keyboard input on an html input of type number? What about in react or material-ui?

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 10 Years ago claudiofredye · Accepted Answer

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.