niao
niao

Reputation: 5070

jQuery validation - element is undefined

I am using a jquery.validation plugin to validate my inputs on the form

I use it as follows:

$(document).ready(function () {
jQuery(function () {
    // You can specify some validation options here but not rules and messages

    jQuery('form[id="reservationForm"]').validate({ ignore: ":not(:visible)" });

    $("#adult1Birthdate").mask("9999-99-99");
    $("#reservationPersonBirthdate").mask("9999-99-99");

    $("#adult1Firstname").rules("add", { required: true, minlength: 2, messages: { required: '<span style="color:Red">Pole wymagane</span>'} });
});

});

I get the following error however:

element is undefined

in the following line:

var settings = $.data(element.form, 'validator').settings;

What am I doing wrong?

**EDIT**

Also the following code does not work when I use jquery.validation

    $(document).ready(function () {
$(function () {

                $('a[id^="regionDetails"]').click(function () {
                    var vid_id = $(this).attr("id").replace("regionDetails", "#regionDetailsArea");
                    $('div[id^="regionDetailsArea"]').hide();
                    $(vid_id).show();
                    return false;
                });
            });
});

Upvotes: 2

Views: 17096

Answers (3)

gabemartinez
gabemartinez

Reputation: 43

I've noticed that when this error appears for me, I have an input being called in rules that I don't have defined in my form. Or, vice versa.

Upvotes: 0

Carlos
Carlos

Reputation: 31

Make sure the element you're calling .rules() on does exist, jquery.validate doesn't check for it when adding rules and fails miserably at the described line, simply because the element is not defined.

Upvotes: 3

Blender
Blender

Reputation: 298206

If you're using $, don't use jQuery. Try this:

$(document).ready(function () {
  $('#reservationForm:visible').validate();

  $("#adult1Birthdate").mask("9999-99-99");
  $("#reservationPersonBirthdate").mask("9999-99-99");

  $("#adult1Firstname").rules("add", { required: true, minlength: 2, messages: { required: '<span style="color:Red">Pole wymagane</span>'} });

  $('a:not(#regionDetails)').click(function() {
    $('div:not(#regionDetailsArea)').hide();
    $($(this).attr("id").replace("regionDetails", "#regionDetailsArea")).show();

    return false;
  });
});

Upvotes: 1

Related Questions