Question

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

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

是否可以让浏览器进行验证，因此只需要其中一个？即如果电话已经填满，请不要提出有关移动设备为空的错误，反之亦然

Answer 1

我玩了一些想法，现在使用jQuery为这个问题找到了一个可行的解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这在两个输入上都使用input事件，当一个非空时，它将另一个输入的必需属性设置为false。

我已经编写了jQuery plugin包装上面的JavaScript代码，以便可以在多组元素上使用。

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

这里是其他任何通过谷歌搜索并想要快速解决许多复选框之一的人而来的。

Answer 3

无论如何，您最好使用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。如果您愿意，请告诉我这是否适合您。

HTML5必需属性是两个字段之一

3 个答案: