Если в поле формы указано «обязательное», Firefox 4 автоматически показывает красную рамку для этого элемента, даже ДО того, как пользователь нажмет кнопку «Отправить».
<input type="text" name="example" value="This is an example" required />
Я думаю, это беспокоит пользователя, поскольку он не делал ошибок вначале.
Я хочу скрыть эту красную границу для начального состояния, но показать ее, когда пользователь нажимает кнопку отправки, если отсутствует поле, отмеченное как обязательное.
Я посмотрел :required
и :invalid
из нового псевдоселектора, но изменения касаются до И после проверки. (из Firefox 4 Обязательная форма ввода КРАСНАЯ граница / контур )
Есть ли способ отключить красную границу до того, как пользователь отправит форму, и показать ее, если есть некоторые отсутствующие поля?
attributes
border
firefox4
required
Кирилл Н.
источник
источник
Ответы:
Это было немного сложно, но я настроил этот пример: http://jsfiddle.net/c5aTe/, который у меня работает. По сути, уловка заключается в том, чтобы обойтись без недействительного текста заполнителя. В противном случае вы сможете сделать это:
или что-то подобное ...
НО, поскольку FF4 решает проверить ваш текст-заполнитель (не знаю, почему ...),
!important
требуется решение в скрипке (немного хакерского использования ).Надеюсь, это поможет!
РЕДАКТИРОВАТЬ
Ух !! - Я чувствую себя глупо. Я обновил свою скрипку: http://jsfiddle.net/c5aTe/2/ - вы можете использовать
:focus
псевдокласс, чтобы сохранить стиль элемента, как будто он действителен, пока пользователь печатает. Он по-прежнему будет выделен красным, если содержимое недействительно, когда элемент теряет фокус, но я думаю, что вы можете сделать только так много с разработанным поведением ...HTH :)
ИЗМЕНИТЬ после принятия:
Сводка примеров по запросу OP (обратите внимание, что первые два предназначены только для FF4, а не для Chrome )
источник
Начиная с Firefox 26, фактический CSS, используемый для определения недопустимых обязательных полей, выглядит следующим образом (взято из forms.css):
Для воспроизведения в других браузерах я использую:
Я поигрался с настройками пикселей, но я никогда бы не угадал 1,5 пикселя, не глядя на источник moz.
Чтобы отключить его, вы можете использовать:
источник
:not(output):-moz-ui-invalid
неinput:not(output):-moz-ui-invalid
для тех , кто пытался это понравилось.Пытаться:
источник
Вот очень простое решение, которое сработало для меня. Я в основном изменил уродливый красный на очень красивый синий, который является стандартным цветом для необязательных полей и веб-соглашением:
источник
У меня это сработало:
источник
Пожалуйста, попробуйте это,
$ ("форма"). attr ("novalidate", истина);
для вашей формы в глобальном файле .js или в разделе заголовка.
источник
Я нашел способ хотя бы в основном решить проблему:
Таким образом, поле ввода начинается с этого красивого синего контура, но как только пользователь вводит требуемый символ (поэтому, если вы вводите символ, а затем отступите, красная рамка будет). В этом случае пользователь может пропустить ввод, поэтому обязательно включите внутреннюю проверку, если вы это сделаете.
источник