jQuery由ID和表单组验证

时间:2015-02-18 11:36:50

标签: jquery jquery-validate

我需要通过id而不是输入名称进行验证,因为我的输入名称是data [name]。我也有一个允许一个或两个字段的规则。

我可以使用id添加规则,但我无法合并这两个规则。有办法吗?

<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代码:

$('#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"]
        }
    },

2 个答案:

答案 0 :(得分:2)

  

我还有一条允许一个或两个字段的规则。

当您未在HTML标记中的任何位置使用require_from_group类时,我看不到您的contact-method规则是如何工作的。您需要添加此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">

  

我需要id验证,而不是输入name因为我的输入namedata[name]

有两种解决方法......

  1. 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/


    1. 使用the .rules('add') method而不是.validate() ...

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

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


    2. 注意:无论您如何声明规则,input元素必须仍然包含唯一的name属性。

答案 1 :(得分:1)

我认为您面临的问题是name中的特殊字符,您可以在对象键中使用字符串文字,如

&#13;
&#13;
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"]
      }
    }
  })
});
&#13;
<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>
&#13;
&#13;
&#13;