Как заставить браузеры выборочно игнорировать обязательный атрибут HTML5 в формах

У меня есть стандартная HTML-форма, которая разделена на две части с помощью элементов fieldset. Один раздел предназначен для ввода имени, адреса электронной почты и т. д., а второй раздел — для ввода почтового индекса для функции автозаполнения адреса (поле поиска почтового индекса во втором разделе не имеет обязательного атрибута).

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

Мой вопрос: когда пользователь вводит свой почтовый индекс в поле поиска почтового индекса, ничего не вводя в первом разделе, все поля в форме отправляются в браузерах, которые не поддерживают этот атрибут (например, Firefox 3.6). В Firefox 4 (например) он учитывает обязательный атрибут и предотвращает отправку формы, если есть пустые поля с обязательным атрибутом. Однако это нарушает мою реализацию проверки ошибок и проверки формы (на стороне сервера, в PHP).

Итак, есть ли способ указать браузеру (в данном случае) игнорировать «обязательные» атрибуты первого раздела при нажатии кнопки отправки второго раздела?

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

Также любое решение должно уметь работать без JavaScript. Пожалуйста, не упоминайте какие-либо ответы, пропагандирующие замену раздела поиска почтового индекса на Ajax, для меня было решено, что это недопустимый вариант.


person ProcessEight    schedule 19.05.2011    source источник


Ответы (2)


Кажется, я вижу твою проблему. Я не верю, что в HTML есть что-то, что позволяет указать это более сложное правило проверки. Я думаю, вам придется:

  1. Разделите эти наборы полей на две отдельные формы на странице;

  2. Используйте две отдельные формы на двух разных страницах; или

  3. Перепишите свой код на стороне сервера, чтобы поля формы без почтового индекса включали атрибут required только тогда, когда пользователь отправил почтовый индекс.

person Paul D. Waite    schedule 19.05.2011
comment
1. Я избегал этого, потому что, если пользователь отправляет форму почтового индекса после ввода своих данных в отдельной форме личных данных, эти данные будут потеряны (не отправлены в POST и не захвачены в противном случае), что очень раздражает пользователя. - person ProcessEight; 20.05.2011
comment
2. Я думаю, что это, пожалуй, лучшее решение без js. - person ProcessEight; 20.05.2011
comment
3. Не знаю, как это будет работать. Вы предлагаете добавить обязательный атрибут только после отправки формы с почтовым индексом? Это хорошая идея, но как это будет работать без использования JavaScript для перезаписи DOM? - person ProcessEight; 20.05.2011
comment
@ sfrost2004: Я с вами на 1. Что касается 3., идея состоит в том, что когда сервер первоначально отправляет форму пользователю, он не включает атрибуты required ни в одно поле, кроме поля почтового индекса. Если пользователь отправляет форму с заполненным только полем почтового индекса, то сервер возвращает ту же форму пользователю с материалом для выбора адреса, но на этот раз он добавляет атрибут required к полям без адреса. - person Paul D. Waite; 20.05.2011

Есть ли на вашей странице вложенная форма? Тег первой формы не работает во вложенных формах, как показано ниже. в этом случае используйте пустой тег формы, чтобы избежать ошибки. а также не пишите класс с тегом формы, начинающимся как form.filed{}

<form>
main form
<form> </form>
<form> form1 </form>
<form> form2 </form>

</form>
person Web Designer cum Promoter    schedule 21.11.2013