Discussion :

[zozoman]

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 html :

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
<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 :

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
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

[Bovino]

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é...

[zozoman]

Merci beaucoup pour ta réponse

ça marche

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
 
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";
    }

[Bovino]

Code :

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

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

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

[zozoman]

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 :

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

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";
    }