jQuery Validate by ID and form group

Question

I need to validate by id and not input name because my input name is data[name]. I also have a rule to allow one or both fields.

I can add the rules with id but I cannot combine both rules. Is there a way.

<input id="email" type="email" class="form-control contact-method" name="data[email]" placeholder="Email">
<input id="phone" type="text" class="form-control contact-method" name="data[phone]" placeholder="Phone">

Js Code:

$('#requestDemo').validate({  // <- attach '.validate()' to your form
    debug: false,
    errorElement: "span",
    errorClass: "help-block",
    rules: {
        phoneInput: {
            require_from_group: [1, ".contact-method"]
        },
        emailInput: {
            require_from_group: [1, ".contact-method"]
        }
    },

Last post here gives the solution it seems? https://forum.jquery.com/topic/jquery-validate-validating-on-input-id-instead-of-name , another example would probably be this? http://stackoverflow.com/questions/14145283/jquery-validation-using-rules-method-on-selected-id-why-does-the-name-attribu — trainoasis, Feb 18 '15 at 11:39

score 4 · Accepted Answer · answered Feb 18 '15 at 15:42

I also have a rule to allow one or both fields.

I don't see how your require_from_group rule is going to work when you're not using the contact-method class anyplace in your HTML markup. You'll need to add this class...

<input id="email" type="email" class="form-control contact-method" name="data[email]" placeholder="Email">
<input id="phone" type="text" class="form-control contact-method" name="data[phone]" placeholder="Phone">

I need to validate by id and not input name because my input name is data[name]

There are two workarounds...

When the name contains special characters like dots or brackets, you would simply surround the name with quotes...

jQuery(function($) {
    $('#requestDemo').validate({
        ....
        rules: {
           "data[email]": {
                require_from_group: [1, ".contact-method"]
            },
            ....

DEMO 1: http://jsfiddle.net/umgjLvhd/

Declare the rule using the .rules('add') method instead of within .validate()...

$('.contact-method').each(function() {
    $(this).rules('add', {
        require_from_group: [1, $(this)]
    });
});

DEMO 2: http://jsfiddle.net/mcotx2oh/

NOTE: No matter how you declare the rules, the input elements must still contain unique name attributes.

score 1 · Answer 2 · answered Feb 18 '15 at 11:42

I think the problem you are facing is the special characters in the name, you can use a string literal in such cases as the object key like

jQuery(function($) {
  $('#requestDemo').validate({ // <- attach '.validate()' to your form
    debug: true,
    errorElement: "span",
    errorClass: "help-block",
    rules: {
      'data[email]': {
        require_from_group: [1, ".contact-method"]
      },
      'data[phone]': {
        require_from_group: [1, ".contact-method"]
      }
    }
  })
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>

<form id="requestDemo" method="post" action="">
  <input id="email" type="email" class="form-control contact-method" name="data[email]" placeholder="Email">
  <input id="phone" type="text" class="form-control contact-method" name="data[phone]" placeholder="Phone">

  <input type="submit" class="button" value="Submit" />
</form>

jQuery Validate by ID and form group

2 Answers2