Invisibilité sur un block

Version imprimable

Bonjour à tous,

J'ai un soucis avec un block qui ne veut pas apparaitre.
Je vous explique j'ai ma page avec 2 images, quand on click sur une, le formulaire 1 apparait, si on click sur l'autre le formulaire 2 apparait.

Avant d'envoyer les données, je contrôle les champs et si un des champs n'est pas remplis je fais afficher un texte qui était caché.

Mon problème c'est que quand je click sur le submit pendant 1s je vois mes champs d'erreur mais après ca me re-cache le formulaire.

Je vous montre mes codes :

page des formulaires :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="ajout">
      <img onmouseover="this.src='img/ajout_application.jpg'" onmouseout="this.src='img/ajout_application2.jpg'" src="img/ajout_application2.jpg" onclick="fnClick2( this, 'bloc_application');"/>
      <img onmouseover="this.src='img/ajout_url.jpg'" onmouseout="this.src='img/ajout_url2.jpg'" src="img/ajout_url2.jpg" onclick="fnClick2( this, 'bloc_url');"/>
	</div>
 
	<div id="bloc_application" style="display:none;background-color:white;top:40%;height:auto;width:40%;position:absolute;left:10%;"> 		
      <form id="form_application" action="" method="get" onSubmit="valider_formulaire(this, 'bloc_application')">
        <span class="titre">Ajouter une application : </span><br/><br/><br/>	
        	Nom de l'application : <input type="text" id="nom_appli" name="nom_appli"/><span id="verif_nom" style="color:red;display:none;"> Ce champ doit être rempli </span><br/><br/>
        	Description de l'application : <input type="text" id="descr_appli" name="descr_appli"/><span id="verif_descr" style="color:red;display:none;"> Ce champ doit être rempli </span><br/><br/>
        	 <label for="onglet">Ajouter à :</label>
         						<select name="onglet" id="onglet">
         							<option value="onglet_faux">--------------</option>
         							<option value="onglet_tools">Tools</option>
         							<option value="onglet_application">Applications</option>
         						</select><span id="verif_onglet" style="color:red;display:none;"> Cette liste doit être rempli </span>
         						<br/><br/><br/>
        <span style="margin-left:50px;">
        	<input type="submit" value="Créer"/>
        	<input type="reset" value="Annuler"/>
        </span>
      </form>		
    </div>

et ma fonction js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function valider_formulaire(thisForm,id_div)
{
    if(thisForm.nom_appli.value == '')
    {
         document.getElementById("verif_nom").style.display = '';
         document.getElementById(id_div).style.display = 'block';
    }
    if(thisForm.descr_appli.value == '')
    {
    	document.getElementById("verif_descr").style.display = '';
        document.getElementById(id_div).style.display = 'block';
    }
    if(thisForm.onglet.value == 'onglet_faux')
    {
    	document.getElementById("verif_onglet").style.display = '';
        document.getElementById(id_div).style.display = 'block';
    }
    document.getElementById(id_div).style.display = 'block';
    return true;
}

Si vous avez des idées =)
Merci d'avance

Bon ba enfète j'ai fait un button onclick qui vérifie et dans ma fonction js j'ai un compteur pour savoir lorsque tout est bon mais maintenant j'ai un autre soucis, une fois que les champs ont été controlé et si ils s'avèrent bon comment les transmettre a ma page de traitement ?

je vous mets mes codes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form id="form_application" action="traitement_ajout.jsp" method="get" >
        <span class="titre">Ajouter une application : </span><br/><br/><br/>	
        	Nom de l'application : <input type="text" id="nom_appli" name="nom_appli"/><span id="verif_nom" style="color:red;display:none;"> Ce champ doit être rempli </span><br/><br/>
        	Description de l'application : <input type="text" id="descr_appli" name="descr_appli"/><span id="verif_descr" style="color:red;display:none;"> Ce champ doit être rempli </span><br/><br/>
        	 <label for="onglet">Ajouter à :</label>
         						<select name="onglet" id="onglet">
         							<option value="onglet_faux">--------------</option>
         							<option value="onglet_tools">Tools</option>
         							<option value="onglet_application">Applications</option>
         						</select><span id="verif_onglet" style="color:red;display:none;"> Cette liste doit être rempli </span>
         						<br/><br/><br/>
        <span style="margin-left:50px;">
        	<input type="hidden" id="verif_complet" value="0" />
        	<input type="button" value="Créer" onclick="valider_formulaire('form_application', 'bloc_application');verif_form('form_application')"/>
        	<input type="reset" value="Annuler"/>
        </span>
      </form>

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
function valider_formulaire(thisForm,id_div)
{
	var test =0;
    if(document.getElementById(thisForm).nom_appli.value == '')
    {
         document.getElementById("verif_nom").style.display = '';
         document.getElementById(id_div).style.display = 'block';
    }
    else
    {
    	document.getElementById("verif_nom").style.display = 'none';
    	test++;
    }
    if(document.getElementById(thisForm).descr_appli.value == '')
    {
    	document.getElementById("verif_descr").style.display = '';
        document.getElementById(id_div).style.display = 'block';
    }
    else
    {
    	document.getElementById("verif_descr").style.display = 'none';
    	test++;
    }
    if(document.getElementById(thisForm).onglet.value == 'onglet_faux')
    {
    	document.getElementById("verif_onglet").style.display = '';
        document.getElementById(id_div).style.display = 'block';
    }
    else
    {
    	document.getElementById("verif_onglet").style.display = 'none';
    	test++;
    }
    if(test == 3)
    {
    	document.getElementById("verif_complet").Value = "1";
    	//window.top.document.location.replace("/ACCORWebRubis/traitement_ajout.jsp");  	
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function verif_form(nom_form)
{
	if(document.getElementById("verif_complet").value == "1")
	{
		document.getElementById('nom_form').submit();
                window.top.document.location.replace("/ACCORWebRubis/traitement_ajout.jsp"); 
	}
	else
	{
		return false;
	}
}

Merci d'avance :)

Enfête je crois je fais la conversation tout seul mais il faut croire que ca m'aide :o

Alors j'ai réussi je post, si ca peut aider quelqu'un pour plus tard :)

je fais mon controle avant le submit comme ceci

Code:

<form id="form_application" action="traitement_ajout.jsp" method="get" onSubmit="return valider_formulaire('form_application', 'bloc_application')" >

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
function valider_formulaire(thisForm,id_div)
{
	var test =0;
    if(document.getElementById(thisForm).nom_appli.value == '')
    {
         document.getElementById("verif_nom").style.display = '';
         document.getElementById(id_div).style.display = 'block';
    }
    else
    {
    	document.getElementById("verif_nom").style.display = 'none';
    	test++;
    }
    if(document.getElementById(thisForm).descr_appli.value == '')
    {
    	document.getElementById("verif_descr").style.display = '';
        document.getElementById(id_div).style.display = 'block';
    }
    else
    {
    	document.getElementById("verif_descr").style.display = 'none';
    	test++;
    }
    if(document.getElementById(thisForm).onglet.value == 'onglet_faux')
    {
    	document.getElementById("verif_onglet").style.display = '';
        document.getElementById(id_div).style.display = 'block';
    }
    else
    {
    	document.getElementById("verif_onglet").style.display = 'none';
    	test++;
    }
    if(test == 3)
    {
    	return true;
    }
    else
    {
    	return false;
    }
}

si c'est bon ca retourne true sinon c'est false et ca n'envoie rien :)