72

I'm trying to dynamically add a validation rule to some dynamic controls:

$("input[id*=Hours]").rules("add", "required");

However this line gives me the following error:

$.data(element.form, "validator") is null

Defining rules the static way with the validate function works fine. What am I doing wrong?

Thanks, Justin

Justin
  • 17,670
  • 38
  • 132
  • 201

5 Answers5

141

You need to call .validate() before you can add rules this way, like this:

$("#myForm").validate(); //sets up the validator
$("input[id*=Hours]").rules("add", "required");

The .validate() documentation is a good guide, here's the blurb about .rules("add", option):

Adds the specified rules and returns all rules for the first matched element. Requires that the parent form is validated, that is, $("form").validate() is called first.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 4
    Thanks, calling validate first solved that error. However it's only validating the first input with an id like Hours instead of validating all of them, any idea why? – Justin Jun 13 '10 at 22:15
  • Each ID is to be considered a unique element in the DOM -- maybe you want to use a class here? – cars Sep 16 '13 at 18:44
  • jquery validate work with the name attribute of the input not the Id, maybe that is your problem Justin – Diego_DX Mar 28 '14 at 19:13
  • 4
    For some reason, even with a broad class based selector, jQuery Validator only ever seems to select the first element of that type. I spent a long time wondering what was going on, but eventually gave up and did something similar to what @Rick has done in a different answer. That is, something like `$(".requiredGroup").each(function () { $(this).rules('add', 'required'); });` – probrandono Nov 26 '14 at 20:56
  • this does not seem to work? fiddle here: https://jsfiddle.net/z1haze/e8z6wv3g/24/ – z1haze Sep 25 '18 at 15:41
  • 1
    @StephenHendricks you have two elements with the same name in the form, that's why your jsfiddle doesn't work, check this out: https://jsfiddle.net/ADn06/e8z6wv3g/38/ – ClownCoder Oct 01 '18 at 22:25
42

To validate all dynamically generated elements could add a special class to each of these elements and use each() function, something like

$("#DivIdContainer .classToValidate").each(function () {
    $(this).rules('add', {
        required: true
    });
});
Rick
  • 629
  • 6
  • 6
  • 5
    what about messages? here is example from documentation https://jqueryvalidation.org/rules/#example:-adds-minlength:-2-to-an-element-which-is-already-required – Basheer AL-MOMANI Sep 18 '16 at 15:03
4

As well as making sure that you have first called $("#myForm").validate();, make sure that your dynamic control has been added to the DOM before adding the validation rules.

row1
  • 5,568
  • 3
  • 46
  • 72
2

The documentation says:

Adds the specified rules and returns all rules for the first matched element. Requires that the parent form is validated, that is,

> $("form").validate() is called first.

Did you do that? The error message kind of indicates that you didn't.

Yasin Patel
  • 5,624
  • 8
  • 31
  • 53
Peter Jaric
  • 5,162
  • 3
  • 30
  • 42
1

In case you want jquery validate to auto pick validations on dynamically added items, you can simply remove and add validation on the whole form like below

//remove validations on entire form
$("#yourFormId")
    .removeData("validator")
    .removeData("unobtrusiveValidation");

//Simply add it again
$.validator
    .unobtrusive
    .parse("#yourFormId");
Mohsin
  • 692
  • 1
  • 7
  • 15
  • Thank you soooo much, this solved one of my biggest problems, omg :s, before knowing this, I would only call the parse() method, and it wouldn't fully cover the newly added inputs, but by removing it first, it now validates all of them, thank you so much. – bzmind Aug 29 '22 at 08:39