jQuery-验证 require_from_group 并按名称选择答案

【问题标题】：jQuery-Validate require_from_group and selecting by namejQuery-验证 require_from_group 并按名称选择
【发布时间】：2018-09-08 11:21:19
【问题描述】：

如 jqueryvalidation require_from_group-method 示例所示，可以使用类来选择组。

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});

我还发现可以通过 ID 进行选择。

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    },
    home_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    },
    work_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    }
  }
});

是否可以按名称选择？以下两次尝试都会出错。

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    },
    home_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    },
    work_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    }
  }
});

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    },
    home_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    },
    work_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    }
  }
});

【问题讨论】：

标签： jquery forms css-selectors jquery-validate

【解决方案1】：

带有属性的选择器适用于= 而不是点:，因此您只能将: 替换为=

参见下面的 sn-p ：

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "mobile_phone": {
                require_from_group: [1, "[name= mobile_phone], [name=home_phone], [name=work_phone]"]
            },
            "home_phone": {
                require_from_group: [1, "[name=mobile_phone], [name=home_phone], [name=work_phone]"]
            },
            "work_phone": {
                require_from_group: [1, "[name=mobile_phone], [name=home_phone], [name=work_phone]"]
            }
        },submitHandler: function (form) { // for demo
            if($(form).valid() ) alert("form valide");
            return false;  //form.submit();
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

<form id="form" method="post" action="#">


    <label for="name">mobile phone :</label>
    <input class="phone-group" type="text" name="mobile_phone" id="mobile_phone" /><br><br>
    
    
    <label for="name">home phone :</label>
    <input class="phone-group" type="text" name="home_phone" id="home_phone" /><br><br>
    
    
    <label for="name">work phone :</label>
    <input class="phone-group" type="text" name="work_phone" id="work_phone" /><br><br>
    <button type="submit">Submit</button>
</form>

【讨论】：