web-dev-qa-db-fra.com

Firefox 4: existe-t-il un moyen de supprimer la bordure rouge dans une entrée de formulaire requise?

Lorsque requis est défini dans un champ de formulaire, Firefox 4 affiche automatiquement une bordure rouge à cet élément, même AVANT que l'utilisateur n'appuie sur le bouton soumettre.

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

Je pense que cela dérange l'utilisateur car il n'a pas fait d'erreurs au début.

Je veux cacher cette bordure rouge pour l'état initial, mais l'afficher lorsque l'utilisateur appuie sur le bouton d'envoi s'il y a un champ manquant marqué comme requis.

J'ai regardé :required et :invalid à partir du nouveau pseudo sélecteur, mais les modifications concernent avant ET après la validation. (de Firefox 4 Formulaire de saisie obligatoire bordure rouge/contour )

Existe-t-il un moyen de désactiver la bordure rouge avant que l'utilisateur envoie le formulaire et de l'afficher s'il manque des champs?

attributesborderfirefox4required
72
Cyril N.

C'était un peu délicat mais j'ai mis en place cet exmaple: http://jsfiddle.net/c5aTe/ qui fonctionne pour moi. Fondamentalement, l'astuce semble être de contourner le texte d'espace réservé qui n'est pas valide. Sinon, vous devriez pouvoir faire ceci:

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

ou quelque chose de similaire ...

[~ # ~] mais [~ # ~] puisque FF4 décide de valider votre texte d'espace réservé (aucune idée pourquoi ...) la solution dans le violon (petit hacky - utilise !important) est requis.

J'espère que ça t'as aidé!

[~ # ~] modifier [~ # ~]

Doh !! - Je me sens bien idiot. J'ai mis à jour mon violon: http://jsfiddle.net/c5aTe/2/ - vous pouvez utiliser le :focus pseudo classe pour conserver l'élément comme s'il était valide pendant que l'utilisateur tape. Cela sera toujours mis en surbrillance en rouge si le contenu n'est pas valide lorsque l'élément perd le focus, mais je pense que vous ne pouvez pas faire grand-chose avec le comportement conçu ...

HTH :)

MODIFIER après acceptation:

Résumé des exemples à la demande de OP (notez que les deux premiers sont uniquement conçus pour FF4 - pas Chrome)

  1. Correction de la validation par FF du texte de votre espace réservé: http://jsfiddle.net/c5aTe/
  2. Correction de la validation FF lors de la frappe: http://jsfiddle.net/c5aTe/2
  3. Solution JS basculant les styles/validation: http://jsfiddle.net/c5aTe/4
132
Stuart Burrows

À partir de Firefox 26, le CSS réel utilisé pour identifier les champs obligatoires non valides est le suivant (provient de forms.css):

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

Pour répliquer dans d'autres navigateurs, j'utilise:

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

J'ai joué avec les paramètres de pixels mais je n'aurais jamais deviné le 1.5px sans regarder la source moz.

Pour le désactiver, vous pouvez utiliser:

input:invalid {
    box-shadow: none;
}
31
Dan

Voici une solution très simple qui a fonctionné pour moi. J'ai essentiellement changé le rouge laid en un bleu très agréable, qui est la couleur standard pour les champs non obligatoires, et une convention Web:

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

Essayer:

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

Cela a bien fonctionné pour moi:

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

Veuillez essayer ceci,

$ ("formulaire"). attr ("novalidate", true);

pour votre formulaire dans votre fichier .js global ou dans la section d'en-tête.

0
Anoop Velluva