Bir form alanında tanımlandığında, Firefox 4, kullanıcı gönder düğmesine basmadan ÖNCE bile bu öğeye otomatik olarak kırmızı bir kenarlık gösterir.

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

Başlangıçta hata yapmadığı için bu durum kullanıcıyı rahatsız ediyor.

İlk durum için bu kırmızı sınırı gizlemek istiyorum, ancak gerekli olarak işaretlenmiş eksik bir alan varsa kullanıcı gönder düğmesine bastığında bunu göstermek istiyorum.

Ben baktım :requiredve :invalidyeni sahte seçiciden, ancak değişiklikler içindir önce VE sonra doğrulama. ( Firefox'tan 4 Gerekli giriş formu KIRMIZI kenarlık / anahat )

Kullanıcı formu göndermeden önce kırmızı sınırı devre dışı bırakmanın ve bazı eksik alanlar varsa bunu göstermenin bir yolu var mı?

Bu biraz yanıltıcıydı ama benim için çalışan şu örneği oluşturdum: http://jsfiddle.net/c5aTe/ . Temel olarak hile geçersiz olan yer tutucu metne sahip olmaktan geçiyor gibi görünüyor. Aksi takdirde, bunu yapabilmeniz gerekir:

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

Veya benzeri...

AMA, FF4 yer tutucu metninizi doğrulamaya karar verdiğinden (neden olduğu hakkında hiçbir fikriniz yok ...) keman içindeki çözüm (biraz hile - kullanımlar !important) gereklidir.

Umarım yardımcı olur!

DÜZENLE

Doh !! - Kendimi aptal hissediyorum. Kemanımı güncelledim: http://jsfiddle.net/c5aTe/2/ - :focussözde sınıfı, öğeyi kullanıcı yazarken geçerliymiş gibi biçimlendirmek için kullanabilirsiniz . Öğe odağı kaybettiğinde içerik geçersizse bu yine de kırmızı renkte vurgulanacaktır, ancak tasarlanan davranışla yapabileceğiniz çok fazla şey olduğunu düşünüyorum ...

HTH :)

Kabul ettikten sonra DÜZENLE:

OP'nin isteği üzerine örneklerin özeti (ilk ikisinin yalnızca FF4 için tasarlandığını, Chrome için değil )

1. Yer tutucu metninizi doğrulayan FF için düzeltme: http://jsfiddle.net/c5aTe/
2. Yazarken FF doğrulaması için düzeltme: http://jsfiddle.net/c5aTe/2
3. JS çözümü geçiş stilleri / doğrulama: http://jsfiddle.net/c5aTe/4

Firefox 26'dan itibaren, geçersiz gerekli alanları tanımlamak için kullanılan asıl CSS aşağıdaki gibidir (forms.css'den gelir):

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

Diğer tarayıcılarda kopyalamak için şunu kullanıyorum:

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

Piksel ayarlarıyla oynadım ama moz kaynağına bakmadan 1.5px'i asla tahmin edemezdim.

Devre dışı bırakmak için şunları kullanabilirsiniz:

input:invalid {
    box-shadow: none;
}

Deneyin:

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

İşte benim için çalışan çok kolay bir çözüm. Temel olarak, çirkin kırmızıyı, zorunlu olmayan alanlar için standart renk olan çok güzel bir maviye ve bir web kuralına dönüştürdüm:

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

Bu benim için iyi çalıştı:

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

Lütfen bunu dene,

$ ("biçim"). attr ("novalidate", doğru);

genel .js dosyanızdaki veya başlık bölümündeki formunuz için.

Sorunu en azından çoğunlukla düzeltmek için bulduğum bir yol:

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

Bu şekilde, giriş alanı bu güzel mavi anahatla başlar, ancak kullanıcı bir karakter girdiğinde gerekli olarak ayarlanır (bu nedenle, bir karakter girip geri tuşuna bastığınızda kırmızı kenarlık oradadır). Bu durumda, bir kullanıcının girişi atlaması mümkündür, bu nedenle, bunu yaparsanız arka uç doğrulamasını yerine getirdiğinizden emin olun.