Firefox 4: есть ли способ удалить красную рамку при вводе обязательной формы?

86

Если в поле формы указано «обязательное», Firefox 4 автоматически показывает красную рамку для этого элемента, даже ДО того, как пользователь нажмет кнопку «Отправить».

<input type="text" name="example" value="This is an example" required />

Я думаю, это беспокоит пользователя, поскольку он не делал ошибок вначале.

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

Я посмотрел :requiredи :invalidиз нового псевдоселектора, но изменения касаются до И после проверки. (из Firefox 4 Обязательная форма ввода КРАСНАЯ граница / контур )

Есть ли способ отключить красную границу до того, как пользователь отправит форму, и показать ее, если есть некоторые отсутствующие поля?

Кирилл Н.
источник
1
Как насчет наброска: 0; ?
Эйс

Ответы:

154

Это было немного сложно, но я настроил этот пример: http://jsfiddle.net/c5aTe/, который у меня работает. По сути, уловка заключается в том, чтобы обойтись без недействительного текста заполнителя. В противном случае вы сможете сделать это:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

или что-то подобное ...

НО, поскольку FF4 решает проверить ваш текст-заполнитель (не знаю, почему ...), !importantтребуется решение в скрипке (немного хакерского использования ).

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ

Ух !! - Я чувствую себя глупо. Я обновил свою скрипку: http://jsfiddle.net/c5aTe/2/ - вы можете использовать :focusпсевдокласс, чтобы сохранить стиль элемента, как будто он действителен, пока пользователь печатает. Он по-прежнему будет выделен красным, если содержимое недействительно, когда элемент теряет фокус, но я думаю, что вы можете сделать только так много с разработанным поведением ...

HTH :)


ИЗМЕНИТЬ после принятия:

Сводка примеров по запросу OP (обратите внимание, что первые два предназначены только для FF4, а не для Chrome )

  1. Исправление для FF проверки вашего текста заполнителя: http://jsfiddle.net/c5aTe/
  2. Исправление для проверки FF при вводе: http://jsfiddle.net/c5aTe/2
  3. JS-решение для переключения стилей / проверки: http://jsfiddle.net/c5aTe/4
Стюарт Берроуз
источник
Большой прорыв, но кажется, что отображается "недействительная" ошибка, когда пользователь нажимает на ввод => когда ввод пуст, ДО того, как он действительно что-то напишет. Но, возможно, мне нужна ошибка в FF4, которую невозможно исправить: /
Cyril N.
Но +1 за ваш способ ограничения ужасной красной тени коробки :)
Кирилл Н.
Не думайте, что вы сможете это сделать, потому что, как ни странно, это слишком умно и проверяется на лету. Вы могли бы проявить смекалку с дополнительным javascript, который добавлял или удалял класс из формы при ее отправке. Затем вы можете переопределить любое выделение проверки в зависимости от того, присутствует этот класс или нет. Хорошая вещь в этом заключается в том, что он все еще использует встроенную проверку, не так хорошо, что требует дополнительных js ...: |
Стюарт Берроуз,
1
был вдохновлен приготовлением завтрака - добавлено выше!
Стюарт Берроуз
Умная! : p Но если вы посмотрите, у вас есть тень для исходного состояния И тень блока для недопустимого состояния. Оба они показаны. Я начинаю думать, что это ошибка Mozilla, они не подумали о начальном состоянии. Если это правильно, и никто другой не добавит полностью работающий способ сделать это, я не приму ваш ответ, но дам вам награду (надеюсь, что это возможно, если нет, я приму ваш ответ). Вы это заслужили :) Спасибо за помощь!
Cyril N.
38

Начиная с Firefox 26, фактический CSS, используемый для определения недопустимых обязательных полей, выглядит следующим образом (взято из forms.css):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

Для воспроизведения в других браузерах я использую:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

Я поигрался с настройками пикселей, но я никогда бы не угадал 1,5 пикселя, не глядя на источник moz.

Чтобы отключить его, вы можете использовать:

input:invalid {
    box-shadow: none;
}
Дэн
источник
Малая точность: она должна быть :not(output):-moz-ui-invalidне input:not(output):-moz-ui-invalidдля тех , кто пытался это понравилось.
Skoua
Вы абсолютная легенда.
abejdaniels
3

Пытаться:

document.getElementById('myform').reset();
Андрей
источник
Это должен быть принятый ответ. Firefox (и большинство браузеров, которые я тестировал) не помечает поле ввода как недопустимое, если пользователь даже ничего не ввел. Это не должно быть проблемой. Я подозреваю, что спрашивающий делает то же самое, что и я, повторно используя форму в одностраничном приложении. Сброс формы очищает все красные границы недопустимого ввода.
Дэниел Ву,
2

Вот очень простое решение, которое сработало для меня. Я в основном изменил уродливый красный на очень красивый синий, который является стандартным цветом для необязательных полей и веб-соглашением:

:required {
    border-color: rgba(82, 168, 236, 0.8);
}
Рэнди Гринкорн
источник
1

У меня это сработало:

input:invalid {
     -moz-box-shadow: none;
}
WVDominick
источник
7
Проблема здесь в том, что после проверки тень блока остается нулевой, и пользователь не имеет представления о том, где возникают ошибки. Я хочу НЕ отображать красную границу в нормальном состоянии формы, а показывать ее, когда пользователь отправляет / размывает форму, если есть ошибка.
Кирилл Н.
0

Пожалуйста, попробуйте это,

$ ("форма"). attr ("novalidate", истина);

для вашей формы в глобальном файле .js или в разделе заголовка.

Ануп Веллува
источник
0

Я нашел способ хотя бы в основном решить проблему:

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

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

Kylew
источник