I have an ASP.Net MVC Project and I am using unobtrusive jQuery Validation.
to add validation when an element looses 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.
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.
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.
Looks like your projects use different types of validadion (One of them use unobtrusive and second use default).
Please check if you are using next settings in web.config's of both projects.:
<configuration>
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
</configuration>
Also you are trying to work with first form in your document.
In case when there is no forms - you will get error.
In case when there are more then one form - only first form will use focusout for validation.
So you should do same thing for each form:
$(document).ready(function () {
var $forms = $('form');
$.each($forms, function (key, value) {
// enable validation when an input loses focus.
var settings = $.data(value, 'validator').settings;
settings.onfocusout = function (element) { $(element).valid(); };
});
});
Checkout number of forms first, I think you are using incorrect form.
$(document).ready(function () {
// enable validation when an input loses focus.
if($('form').length > 0) {
// $('form')[0] is it proper form?
var settngs = $.data($('form')[0], 'validator').settings;
settngs.onfocusout = function (element) { $(element).valid(); };
}
});
Doing this $.validator.unobtrusive.parse($("#base-modal form"));
resolved my issue