我有一个包含两个必填字段的表单：
<form>
<input type="tel" name="telephone" required>
<input type="tel" name="mobile" required>
<input type="submit" value="Submit">
</form>
是否可以让浏览器进行验证，因此只需要其中一个？即如果电话已满，请不要抛出有关手机为空的错误，反之亦然
【问题讨论】：
标签： html forms validation
无论如何，您最好使用 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>
.
现场演示：http://codepen.io/anon/pen/LCpue?editors=100。如果您愿意，请告诉我这是否适合您。
【讨论】：
required 属性，以利用现代浏览器的HTML5 表单验证。您的答案实现了自定义客户端验证。
鉴于 jQuery 在 JavaScript 世界中变得有些过时，并且 ES6 提供了一些不错的语法糖，我编写了一个与原始答案等效的纯 JS：
document.addEventListener('DOMContentLoaded', function() {
const inputs = Array.from(
document.querySelectorAll('input[name=telephone], input[name=mobile]')
);
const inputListener = e => {
inputs
.filter(i => i !== e.target)
.forEach(i => (i.required = !e.target.value.length));
};
inputs.forEach(i => i.addEventListener('input', inputListener));
});<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>这在两个输入上都使用了input 事件，当一个不为空时，它将另一个输入的所需属性设置为 false。
我尝试了一些想法，现在使用 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);
});
});
我写了一个 jQuery plugin 包装了上面的 JavaScript 代码，以便它可以用于多组元素。
【讨论】：
对于两个文本字段，@Andy 的回答非常棒，但是如果有两个以上的字段，我们可以使用这样的东西。
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);
});
});
【讨论】：
根据安迪的回答，但我需要一个复选框实现并想出了这个。
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)
});
});
其他任何人都可以通过谷歌搜索并希望快速解决许多复选框中的一个。
【讨论】：