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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

EDIT

Дох !! - Чувствую себя глупо. Я обновил свою скрипку: 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

Answer 2

Начиная с 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,5px, не глядя на источник moz.

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

input:invalid {
    box-shadow: none;
}

Answer 3

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

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

Answer 4

Это хорошо сработало для меня:

input:invalid {
     -moz-box-shadow: none;
}

Answer 5

Попробуйте:

document.getElementById('myform').reset();

Answer 6

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

$ ( "форма") атр ( "NOVALIDATE", правда).

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