Discussion :

[friendofweb]

Bonjour,

Voilà, je suis en train de lire un livre sur le CSS3 et je voudrais pratiquer un code qui est proposé.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <!-- Il faudra voir quel est l'attribut à incorporer pour le traitement des formulaires, JS ou PHP -->
<form action="" method="post">
  <fieldset>
    <legend>Entrez une adresse e-mail</legend>
    <input id="POST-name" type="text" name="name">
  <input type="submit" value="Envoyer">
</fieldset>
</form>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/*
* Si un champ est invalide,
* le bouton de soumission est non cliquable,
*à condition que le champ invalidé et le bouton soient frères
* et que le bouton vienne après le champ.
*/
input:invalid ~ [type="submit"]{
  opacity: .3;
  pointer-events: none;
}

aperçu email invalide

Apparemment, le code que je vous montre ne rempli pas les conditions pour désactiver le bouton.
Avez-vous une idée de comment je pourrais mettre cela en pratique s'il vous plaît ?

[Ecared]

Tu peux mettre un required dans ton input par exemple pour qu'il y ait au moins une condition qui fait que ton formulaire soit invalide

[friendofweb]

J'ai essayé, mais required ne suffit pas...

Je n'ai pas mis le "require" dans le bon "input", j'ai dû changer celui du champ à remplir comme ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="POST-name" type="text" name="name" required="required">

De plus, il y a une faute dans le code que je communique, c'est à dire, la balise "input" ne se ferme pas avec slash... <-- faute corrigée.

MDN_FORMULAIRE

Merci !