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

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

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

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

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

Я посмотрел на :required и :invalid на новый псевдоселектор, но изменения для до И после проверки. (из Firefox 4 Необходимая форма ввода RED-граница/контур)

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

Ответы

Ответ 1

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

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

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

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

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

ИЗМЕНИТЬ

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

HTH:)

EDIT после принятия:

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

Fix for FF, подтверждающий ваш текст владельца места: http://jsfiddle.net/c5aTe/
Исправить для проверки FF по мере ввода: http://jsfiddle.net/c5aTe/2
JS решение для переключения стилей/валидации: http://jsfiddle.net/c5aTe/4

Ответ 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;
}

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

Попробуйте это,

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

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

Ответ 6

Пытаться:

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