Vérifier plusieurs fois un formulaire

Bonjour à tous,

J'ai un formulaire et je souhaite vérifier les champs : j'ai créé une fonction javascript. Ma fonction vérifie les champs, colore en roule le ou les champs erronés. Je peux donc corriger mes erreurs. Mon problème est qu'après correction, s'il y a encore une erreur, tous les champs qui étaient sur fond rouge restent sur fond rouge et non pas seulement le champ erroné.

Voici le début de mon formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id="formCreerBain" action="" method="POST" onsubmit="return verifierCreerBain();">
    <table class="tblGen">
        <caption>GENERALITES</caption>
        <tr>
            <td>Référence du bain *</td>
            <td><input type="text" size="40" name="referenceBain" maxlength="10" id="referenceBain" /><label id="verifReferenceBain"></label></td>
        </tr>
        <tr>
            <td>Nom du bain *</td>
            <td><input type="text" size="40" name="nomBain" maxlength="100" id="nomBain" /><label id="verifNomBain"></label></td>
        </tr>
        <tr>
            <td>Référence de la ligne *</td>
            <td><input type="text" size="40" name="localisationBain" maxlength="10" id="localisationBain" /><label id="verifLocalisationBain"></label></td>
        </tr>
        <tr>
            <td>Volume du bain (L)</td>
            <td><input type="text" size="40" name="volumeBain" maxlength="10" id="volumeBain" /><label id="verifVolumeBain"></label></td>
        </tr>

et le code JS

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function verifierCreerBain() 
{
    var erreur=0;
 
    if(document.forms["formCreerBain"].elements["referenceBain"].value==="")
    {
        document.forms["formCreerBain"].elements["referenceBain"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(document.forms["formCreerBain"].elements["nomBain"].value==="")
    {
        document.forms["formCreerBain"].elements["nomBain"].style.backgroundColor = "#FF0000";
        erreur++;
    }    
 
    if(document.forms["formCreerBain"].elements["localisationBain"].value==="")
    {
        document.forms["formCreerBain"].elements["localisationBain"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(document.forms["formCreerBain"].elements["idfaj"].value==="")
    {
        document.forms["formCreerBain"].elements["idfaj"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(document.forms["formCreerBain"].elements["refFich"].value==="")
    {
        document.forms["formCreerBain"].elements["refFich"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(document.forms["formCreerBain"].elements["dateCrea"].value==="")
    {
        document.forms["formCreerBain"].elements["dateCrea"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(document.forms["formCreerBain"].elements["dateRev"].value==="")
    {
        document.forms["formCreerBain"].elements["dateRev"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(document.forms["formCreerBain"].elements["indRev"].value==="")
    {
        document.forms["formCreerBain"].elements["indRev"].style.backgroundColor = "#FF0000";
        erreur++;
    }
 
    if(erreur==0)
    {
        return (true);
    }
    else
    {
        erreur1.innerHTML="Certains champs sont incomplets ou erronés";
        var champ=document.forms["formCreerBain"];
        for(i=0;i<champ.length;i++)
        {
            document.forms.formCreerBain[i].value.innerHTML=document.forms.formCreerBain[i].value;
        }
        return (false);
    }
}

Merci pour votre aide

Ben je pense qu'en mettant des else après tes if pour rétablir les styles initiaux, ça ne devrait pas être très compliqué... :roll:

Merci beaucoup pour ta réponse

ça marche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function verifierCreerBain() 
{
    var erreur=0;
 
    if(document.forms["formCreerBain"].elements["referenceBain"].value==="")
    {
        document.forms["formCreerBain"].elements["referenceBain"].style.backgroundColor = "#FF0000";
        erreur++;
    }
    else
    {
        document.forms["formCreerBain"].elements["referenceBain"].value.innerHTML=document.forms["formCreerBain"].elements["referenceBain"].value;
        document.forms["formCreerBain"].elements["referenceBain"].style.backgroundColor = "#FFFFFF";
    }

Code:

document.forms["formCreerBain"].elements["referenceBain"].value.innerHTML

:koi:

Tu ne peux pas utiliser à la fois value et innerHTML... C'est l'un ou l'autre en fonction de l'élément ciblé.

je pense que mon code est juste cette fois ci. Je l'ai simplifié car je vais le tester avec des expressions régulières.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function verifierCreerBain() 
{
    var erreur=0;
    var input1=document.forms["formCreerBain"].elements["referenceBain"].value;
    if(input1==="")
    {
        document.forms["formCreerBain"].elements["referenceBain"].style.backgroundColor = "#FF0000";
        erreur++;
    }
    else
    {
        input1.innerHTML=document.forms["formCreerBain"].elements["referenceBain"].value;
        document.forms["formCreerBain"].elements["referenceBain"].style.backgroundColor = "#FFFFFF";
    }