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

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

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

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

источник

2014-06-25 Andy

Я думаю, что это было бы вне контроля HTML, и вам придется реализовать какую-то функциональность JS. Быстрый Google показывает этот jsfiddle http://jsfiddle.net/LEZ4r/1/, поэтому у вас может быть инструкция if для управления. Надеюсь, это поможет ... – CheckeredMichael

Отъезд [** this **] (http://stackoverflow.com/a/10694930/3509874) ответ! – urbz

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

Это использует input событие на обоих входах, и когда один не пуст он устанавливает требуемое свойство другого ввода в значение false.

Я написал jQuery plugin, обертывая вышеуказанный код JavaScript, чтобы он мог использоваться для нескольких групп элементов.

источник

2014-06-26 13:40:25 Andy

С некоторыми настройками для моего требования это работало ужасно, спасибо .. – Anupam

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

источник

2014-06-26 04:53:47

Спасибо за ваш ответ. Тем не менее, проверка формы выполняется на стороне сервера, поэтому я не беспокоюсь о старых браузерах. Подтверждение формы HTML5 является прогрессивным улучшением для пользователей с более новыми браузерами, которые я бы хотел использовать и отображал собственные сообщения об ошибках браузера – Andy

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

ответ

Смежные вопросы