JQuery-Validation - using rules method on selected

Question

I'm a little confused about the JQuery validation plugin behavior.

If I have the following JQuery:

$('#form1').validate({
    /* other validation */
});

$('#txt1').rules("add",
{
    required: true,
    messages: { required: 'This is required!' }
});

and the following text input, with an id but no name attribute:

<input type="text" id="txt1"/>

No required message pops up on the text box.

However, if I add a name attribute:

<input type="text" id="txt1" name="anything"/>

It validates it just fine.

Why is that? Since I'm using the rules("add", rules) method on an ID selector, why does it need the name attribute present in order to associate rules to the element? Thanks for any insight!

Answer 1

A name attribute is required on the element firstly because that's what jQuery validate uses internally as a key for each field, and secondly because the name attribute is required on input elements to ensure the page validates to the specified DOCTYPE.

Answer 2

If you want to apply the rules using the id then use like this,

$(function () {
  var $field = $("#id_field").attr("name");
  var $params = {debug:false, rules:{}, messages:{}};
  $params['rules'][$field] = {"required": true, "rule": ["params"]};
  $params['messages'][$field] = "error message";

  $("#frm").validate($params);
});