HTML5 требуется атрибут одного из двух полей

У меня есть форма с двумя обязательными полями ввода:

Возможно ли, чтобы браузеры проверяли, что требуется только один из них? Если телефон заполнен, не делайте ошибки о том, что мобильный пуст, и наоборот

Ответы

Ответ 1

Я играл с некоторыми идеями и теперь имею рабочее решение для этой проблемы с помощью 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>

Ответ 2

В любом случае вам лучше сделать проверку данных с помощью 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. Дайте мне знать, если это сработает для вас, если хотите.