Discussion :

[r2000]

Hello,

est-ce que vous sauriez s'il existe une technique particulière pour griser un <bouton> de type submit tant que tous les champs n'ont pas été correctement remplis?

il s'agit d'un formulaire html5 avec des attributs de validation sur les éléments input et select (maxlength, pattern...)

Merci!

[Jacques Beauregard]

Bonjour,

C'est un classique de base en javascript : il te suffit de vérifier que chaque champ de ton formulaire est bien rempli.
Si un champ n'est pas rempli : bouton submit grisé.

[r2000]

Hello Jacques Beauregard (pas mal ton avatar)

oui en javascript c'est faisable, mais en pur html5 ce n'est pas encore possible ?

[Jacques Beauregard]

Tu peux en jouant avec "required" sur tes inputs.
Voici un formulaire exemple pour te montrer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="" method="post">
    <fieldset>
        <legend>Booking Details</legend>
        <div>
            <label for="name">Name:</label>
            <input id="name" name="name" value="" required  pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
            <span id="name-format" class="help">Format: firstname lastname</span>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" value="" required aria-required="true">
        </div>
        <div>
            <label for="website">Website:</label>
            <input type="url" id="website" name="website" value="">
        </div>
        <div>
            <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
            <input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
        </div>
        <div class="submit">
            <input type="submit" value="Submit">
        </div>
    </fieldset>
</form>

Tu peux contrôler chaque champ à ta guise. Tu as un exemple pour le format d'une adresse mail (@ attendu par exemple)
Cordialement.

[r2000]

merci !

[gazza]

Merci Jacques pour cet exemple de formulaire.

Toutefois, le bouton 'Submit' n'est pas désactivé ("grisé"). Donc pour le désactiver (visuellement "non-cliquable") tant que le formulaire n'est pas correctement rempli, il faut passer par le Javascript ?