Коли необхідне визначено у полі форми, 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, який використовується для ідентифікації недійсних обов’язкових полів, є таким (походить із форм.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;
}

Ось дуже просте рішення, яке мені вдалося. В основному я змінив потворний червоний на дуже приємний синій, який є стандартним кольором для необов’язкових полів, і веб-домовленість:

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

Це мені вдало:

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

Спробуйте:

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

Будь ласка, спробуйте це,

$ ("форма"). attr ("недійсна", правда);

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