HTML - формы, два ввода текста. обязательный атрибут. Как пользователь должен ввести строку в любое из двух полей для отправки?

У меня возникли проблемы с попыткой найти решение для этого, не прибегая к оператору php или javascript. Это потому, что идея кажется настолько простой, что я почти уверен, что должен быть способ сделать это без использования двух.

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

Итак, у меня есть 3 поля: «Телефон», «Мобильный», «Факс».

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

Но, я думаю, мой вопрос заключается в следующем... Можно ли каким-то образом использовать атрибут required для достижения такого эффекта?

Вот html для этих полей:

<li>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" value="'.htmlout($phone).'" required aria-required="true" placeholder="0317021101"title="Please enter your home or work number here. You must enter either a phone, or mobile number." maxlength="20"/>
</li>
<li>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile" id="mobile" value="'.htmlout($mobile).'" placeholder="0827564829" title="Please enter your mobile number here. You must enter either a mobile, or phone number." maxlength="20"/>
</li>

В помощь, вклад или совет по этому поводу будет принята с благодарностью, спасибо!


person Craig van Tonder    schedule 04.01.2012    source источник


Ответы (4)


Не проще ли было бы иметь два поля для телефонных номеров, первое из которых обязательно? Объяснения как бы говорят о том, что любой из номеров может быть номером мобильного телефона или чем-то еще, так почему бы не сделать их симметричными по структуре?

Первый может быть помечен как «Основной телефон (обязательно)», а другой — как «Дополнительный телефон (необязательно)». Они довольно длинные для ярлыков, но по моему опыту, слишком короткие ярлыки (такие как «Телефон» и «Альтернативный телефон») заставляют некоторых пользователей повторно вводить первый номер...

person Jukka K. Korpela    schedule 04.01.2012
comment
Вы можете удалить (обязательный) и (необязательный) текст с меток и просто использовать существующий обязательный индикатор. В конце концов, необязательные поля должны быть необязательными, верно? - person cdeszaq; 04.01.2012
comment
Спасибо за ваш вклад, и да, это имело смысл. На самом деле я начал с этой идеи, но никогда не думал об этом в таком ключе. Я верю, что у нас есть победитель!! - person Craig van Tonder; 04.01.2012

К сожалению, required работает только с отдельными полями, а не с группами полей (даже если они имеют одинаковые name), поэтому невозможно сделать это только с проверкой HTML5.

Демонстрация: http://jsfiddle.net/ka7kC/

В любом случае, вы не должны полагаться на проверку на стороне клиента, вы также должны проверять на стороне сервера. Кроме того, не все браузеры даже поддерживают проверку HTML5.

Если вы используете jQuery, я предлагаю проверенный плагин проверки для клиентской стороны:

person Wesley Murch    schedule 04.01.2012
comment
Спасибо за ссылку, я посмотрю... Я бы хотел, чтобы технологии совершили гигантский скачок :) - person Craig van Tonder; 04.01.2012
comment
Дела идут хорошо, я бы сказал. Мы прошли долгий путь за последние несколько лет. Плагин проверки в любом случае намного мощнее и гибче, чем проверка HTML5. Правила валидации, прописанные прямо в разметке, всегда казались мне немного подозрительными, лично я все равно предпочитаю писать их отдельно. - person Wesley Murch; 04.01.2012
comment
Да, у вас есть хорошая мысль. И я уверен, что плагин мне тоже подойдет больше, но проблема в том, что проверка html делает вещи такими крутыми, так легко :) - person Craig van Tonder; 04.01.2012
comment
Я думаю, что я стремлюсь к тому, чтобы проверка html5 выполнялась для тех, кто может ее использовать... Затем используйте что-то вроде этого плагина в качестве полифилла! - person Craig van Tonder; 04.01.2012

Если это действительно требуется, только сценарий проверки на стороне сервера может фактически обеспечить его соблюдение.

На самом деле Javascript — единственный другой вариант сложной (т. е. чего-то большего, чем сопоставление с образцом) проверки на стороне клиента.

person cdeszaq    schedule 04.01.2012

Атрибут «обязательный» не работает в большинстве версий IE и некоторых версиях Safari, поэтому вы можете проверить ввод другим способом.

person j08691    schedule 04.01.2012
comment
Вот почему я также включил обязательный атрибут WAI-ARIA, он поддерживается в ie8+? - person Craig van Tonder; 04.01.2012