jQuery Validation - 两个字段，只需要填写一个

Question

我在表单上使用jQuery Validation Plugin。在我的表格上，我有一个“电话”字段和一个“手机号码”。字段。

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

Answer 1

这看起来像你需要使用dependency-callback

这将允许您做的是：

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

然后，您可以在两个电话字段上放置required 验证规则，该规则仅根据函数回调的返回而需要；因此，您可以在电话字段上设置一条规则，说明仅当移动字段为空时才需要此规则，反之亦然。

这是未经测试的，但在理论上

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

请务必查看 cmets/other 答案以获取可能的更新答案。

更新

rules: {
     telephone: {
          required: '#mobile:blank'
     },
     mobile: {
          required: '#telephone:blank'
     }
}

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 字段中删除“必需”类之前输入有效的电话号码，反之亦然。

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

Answer 4

我遇到了麻烦是.is(':empty') 所以这是我的工作选项示例。

之前：

rules: {
   name:       {required: true},
   email:      {required: true},
   phone:      {required: true}
}

所有字段都是必需的。但我想要电子邮件和/或电话来创建“或”：

rules: {
   name:       {required: true},
   email:      {required: 
                    function() {
                        //returns true if phone is empty   
                        return !$("#phone").val();
                    }
               },
   phone:      {required:
                    function() {
                        //returns true if email is empty
                        return !$("#email").val();
                     }
               }
},
messages: {
   email: "Email is required if no phone number is given.",
   phone: "A phone number is required if no phone email is given."
}

您会看到我添加了messages 选项来为用户提供一些有意义的信息，因为默认消息会说每个字段都是必需的，在这种情况下不是这样。

Answer 5

要求是验证需要是 C 或 (A 和 B) 是必需的。 对我有用的是：

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) {
        returnVal = true;
    }
    return returnVal; 
}, 'Either C or A and B is required');


$('#Afield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Cfield").valid();

});

$('#Bfield.form-control').change(function(){
    $(this).valid();
    $("#Afield").valid();
    $("#Cfield").valid();
});

$('#Cfield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Afield").valid();
});


within rules I have 
Afield: "multipeFieldValidator",
Bfield: "multipeFieldValidator",
Cfield: "multipeFieldValidator" 

Answer 6

$(document).ready(function () {
    jQuery.validator.addMethod("mobile10d", function (value, element) {
        return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value);
    }, "Please enter a valid 10 digit phone number.");
    $("#form_id").validate({
        rules: {
            mobile: {
                required: "#telephone:blank",
                mobile10d: true
            },
            telephone: {
                required: "#mobile:blank",
                mobile10d: true
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form class="" action="" method="POST" id="form_id">
    <div class="col-md-4 form-group">
        <label class="form-control">Mobile<span class="required">*</span></label>
        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9">
    </div>
    <div class="col-md-4 form-group">
        <label class="form-control">Telephone<span class="required">*</span></label>
        <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9">
    </div>
    <div class="form-group">
        <input type="submit" name="" value="Submit" class="apply-now-btn">
    </div>
</form>

Answer 7

这样就可以了

Mobile: {
    required: function(element) {
    return (jQuery.isEmptyObject($("#Phone").val()));
    }
},
Phone: {
    required: function(element) {
        return (jQuery.isEmptyObject($("#Mobile").val()));
    }
}

Answer 8

认为这可能是一个有用的补充 - 不需要插件。 当只需要一个时，这将处理 div 内的所有输入字段。 您可以根据需要对其进行更改 - 例如在找到的输入上创建额外的验证。

HTML

<div class="MOTHER-DIV">
    -- any content can go here
    -- all inputs will be checked
    -- returns true on one value found
</div>

代码

var hasInput=false;
$(".MOTHER-DIV :input").each(function () {
    if($(this).val()  !== "") {
        hasInput=true;
    }
});
if(!hasInput) {
    alert("nothing found");
} else {
    alert("content found");
}

对于复选框，请使用：

var hasCheckBoxInput=false;
$('.OTHER-DIV input[type=checkbox]').each(function () {
    if($(this).is(':checked')) {
        hasCheckBoxInput=true;
    }
});
if(!hasCheckBoxInput) {
    alert("NO checkbox is checked");
} else {
    alert("YES! One checkbox checked");
}