jQuery验证 - 两个字段,只需要填写一个

Question

我正在我的表单上使用jQuery Validation Plugin.在我的表格上,我有一个'电话'字段和一个'手机号码' 领域.

我将如何制作它以便用户必须填写其中一个,但它可以是字段？

Answer 1

这看起来像你需要使用依赖回调

这将允许您做的是:

根据给定回调的结果,使元素成为必需元素.

然后,您可以required根据函数回调的返回,在两个电话字段上放置验证规则; 因此,您可以在电话字段上设置规则,以便仅在移动字段为空时才需要此规则,反之亦然.

这是未经测试但在理论上

rules: {
    telephone: {
        required: function(element) {
            return $("#mobile").is(':empty');
        }
    },
    mobile: {
        required: function(element) {
            return $("#telephone").is(':empty');
        }
    }
}

请务必查看评论/其他答案,以获取可能的更新答案.

Answer 2

我认为正确的方法是使用"require_from_group"方法.

你可以在http://jqueryvalidation.org/require_from_group-method/上查看

这个例子正是您要搜索的内容:

<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).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"]
    }
  }
});
</script>

必须包含additional-methods.js

Answer 3

来到这里寻找相同的答案.发现以上帖子非常有帮助.谢谢.

我已经扩展了这个解决方案,以检查其他字段是否实际上是有效的,而不仅仅是"非空".这确保用户在从移动字段移除"必需"类之前输入有效的电话号码,反之亦然.

Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}