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

Lorsque requirejs est défini dans un champ de formulaire, Firefox 4 affiche automatiquement une bordure rouge à cet élément, même avant que l’utilisateur ne clique sur le bouton d’envoi.

 

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

Je souhaite masquer cette bordure rouge pour l’état initial, mais affichez-la lorsque l’utilisateur clique sur le bouton Envoyer s’il y a un champ manquant marqué comme requirejs.

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

Existe-t-il un moyen de désactiver la bordure rouge avant que l’utilisateur soumette le formulaire et de l’afficher s’il y a des champs manquants?

C’était un peu difficile mais j’ai mis en place cet exemple: http://jsfiddle.net/c5aTe/ qui fonctionne pour moi. Fondamentalement, le truc semble être de contourner le texte de réservation qui est invalide. 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 le texte de votre espace réservé (aucune idée de la raison…), la solution dans le violon (peu de piratage – utilise !important ) est nécessaire.

J’espère que cela pourra aider!

MODIFIER

Doh !! – Je me sens bien idiot. J’ai mis à jour mon violon: http://jsfiddle.net/c5aTe/2/ – vous pouvez utiliser la pseudo-classe :focus pour que l’élément rest stylé comme si l’utilisateur était en train de taper. Cela sera toujours visible en rouge si le contenu est invalide lorsque l’élément perd le focus, mais je pense qu’il n’y a que peu de choses à faire avec le comportement conçu …

HTH 🙂


EDIT après acceptation:

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

  1. Correctif pour FF validant le texte de votre espace réservé : http://jsfiddle.net/c5aTe/
  2. Correction de la validation FF à mesure que vous tapez: http://jsfiddle.net/c5aTe/2
  3. Styles de validation de la solution JS / validation: http://jsfiddle.net/c5aTe/4

À partir de Firefox 26, le CSS 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 parameters de pixel mais je n’aurais jamais deviné le 1.5px sans regarder la source de moz.

Pour le désactiver, vous pouvez utiliser:

 input:invalid { box-shadow: none; } 

Voici une solution très simple qui a fonctionné pour moi. J’ai fondamentalement changé le rouge moche en un très beau bleu, qui est la couleur standard pour les champs non obligatoires, et une convention web:

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

Cela a bien fonctionné pour moi:

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

S’il vous plaît essayer ceci,

$ (“form”). attr (“novalidate”, true);

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