Html HTML5 必需属性两个字段之一
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24403817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 required attribute one of two fields
提问by Andy
I have a form with two required input fields:
我有一个包含两个必填输入字段的表单：
<form>
<input type="tel" name="telephone" required>
<input type="tel" name="mobile" required>
<input type="submit" value="Submit">
</form>
Is it possible to get browsers to validate so only one of them is required? i.e if telephone is filled, don't throw an error about mobile being empty and vice versa
是否可以让浏览器进行验证，以便只需要其中一个？即如果电话已满，请不要抛出有关手机为空的错误，反之亦然
回答by Andy
I played around with some ideas and now have a working solution for this problem using jQuery:
我尝试了一些想法，现在有了一个使用 jQuery 解决这个问题的可行解决方案：
jQuery(function ($) {
var $inputs = $('input[name=telephone],input[name=mobile]');
$inputs.on('input', function () {
// Set the required property of the other input to false if this input is not empty.
$inputs.not(this).prop('required', !$(this).val().length);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
Telephone:
<input type="tel" name="telephone" value="" required>
<br>Mobile:
<input type="tel" name="mobile" value="" required>
<br>
<input type="submit" value="Submit">
</form>This uses the inputevent on both inputs, and when one is not empty it sets the required property of the other input to false.
这input在两个输入上使用事件，当一个输入不为空时，它将另一个输入的 required 属性设置为 false。
I've written a jQuery pluginwrapping the above JavaScript code so that it can be used on multiple groups of elements.
我编写了一个包含上述 JavaScript 代码的jQuery 插件，以便它可以用于多组元素。
回答by Sanaullah Ahmad
For two text fields @Andy's answer is working awesome, but in case of more than two fields we can use something like this.
对于两个文本字段@Andy's answer 工作得很好，但如果有两个以上的字段，我们可以使用这样的东西。
jQuery(function ($) {
var $inputs = $('input[name=phone],input[name=mobile],input[name=email]');
$inputs.on('input', function () {
var total = $('input[name=phone]').val().length + $('input[name=mobile]').val().length + $('input[name=email]').val().length;
$inputs.not(this).prop('required', !total);
});
});
回答by Brendan Robertson
Based on Andy's answer, but I needed a checkbox implementation & came up with this.
基于安迪的回答，但我需要一个复选框实现并想出了这个。
what role(s) do you want?
<input type="checkbox" data-manyselect="roler" name="author" required>
<input type="checkbox" data-manyselect="roler" name="coder" required>
<input type="checkbox" data-manyselect="roler" name="teacher" required>
where will you work?
<input type="checkbox" data-manyselect="placement" name="library" required>
<input type="checkbox" data-manyselect="placement" name="home" required>
<input type="checkbox" data-manyselect="placement" name="office" required>
jQuery(function ($) {
// get anything with the data-manyselect
// you don't even have to name your group if only one group
var $group = $("[data-manyselect]");
$group.on('input', function () {
var group = $(this).data('manyselect');
// set required property of other inputs in group to false
var allInGroup = $('*[data-manyselect="'+group+'"]');
// Set the required property of the other input to false if this input is not empty.
var oneSet = true;
$(allInGroup).each(function(){
if ($(this).prop('checked'))
oneSet = false;
});
$(allInGroup).prop('required', oneSet)
});
});
Here for anyone else getting here by googling and wanting a quick solution for one of many checkboxes.
在这里，对于通过谷歌搜索并想要快速解决许多复选框之一的其他人。
回答by Frank Conijn
You would better do form data validation with Javascript anyway, because the HTML5 validation doesn't work in older browsers. Here is how:
无论如何，您最好使用 Javascript 进行表单数据验证，因为 HTML5 验证在旧浏览器中不起作用。方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation Phone Number</title>
</head>
<body>
<form name="myForm" action="data_handler.php">
<input type="tel" name="telephone">
<input type="tel" name="mobile">
<input type="button" value="Submit" onclick="validateAndSend()">
</form>
<script>
function validateAndSend() {
if (myForm.telephone.value == '' && myForm.mobile.value == '') {
alert('You have to enter at least one phone number.');
return false;
}
else {
myForm.submit();
}
}
</script>
</body>
</html>
.
Live demo here: http://codepen.io/anon/pen/LCpue?editors=100. Let me know if this works for you, if you will.
.
现场演示：http: //codepen.io/anon/pen/LCpue?editors=100。如果您愿意，请告诉我这是否适合您。
