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

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

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

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

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

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

Это было немного сложно, но я настроил этот пример: 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

Начиная с 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;
}

Пытаться:

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

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

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

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

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

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

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

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

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

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

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