HTML5 必需属性两个字段之一

Question

我有一个包含两个必填输入字段的表单：

 <form>
    <input type="tel" name="telephone" required>
    <input type="tel" name="mobile" required>
    <input type="submit" value="Submit">
</form>

是否可以让浏览器进行验证，因此只需要其中一个？即如果电话已满，不要抛出关于手机为空的错误，反之亦然

原文由 Andy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2020-06-21 更新（ES6）：

鉴于 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 解决这个问题的可行解决方案：

 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 插件 来包装上述 JavaScript 代码，以便它可以用于多组元素。

原文由 Andy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

基于 Andy 的回答，但我需要一个复选框实现并想出了这个。

 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)
    });
});

在这里，任何其他人都可以通过谷歌搜索到达这里，并希望为许多复选框之一找到快速解决方案。

原文由 Brendan Robertson 发布，翻译遵循 CC BY-SA 4.0 许可协议