Problema Form Javascript

**emi10** · 09-12-2013, 23:54

ciao ragazzi ....
ho un problema con uno script in javascript.
Ho un form che vorrei validare. Funziona il mio codice ma vorrei rendere il messaggio di errore
e l'immagine di check generica.
praticamente se vedete il codice noterete che per ogni campo assegno un div con nome diverso
e immagine con nome diverso .
come posso rendere il div di errore e l'immagine con un nome univoco ?
perche assurdamente se inserissi 200 campi non avrebbe senso mettere 200 nomi diversi ....

mi date solo una dritta ?
Grazie

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modulo registrazione</title>
<script src="script_controlli.js"></script>  
<style type="text/css"> 
    
body
{
background-color:#42413C;
margin-top: 20px;
font-size: 90%;
font-family:cursive;
}


#container {
    width: 460px;
    height:500px;
    background: white;
    margin: 10px auto;
}


#container .righe {
    width: 460px;
    height:2px;
    background: lightgrey;
    margin: 0px auto;
    position:absolute;
    
}


#container .righe1 {
    width: 460px;
    height:2px;
    background: lightgrey;
    margin: 45px auto;
    position:absolute; 
}


#container .righe2 {
    width: 460px;
    height:2px;
    background: lightgrey;
    margin: 90px auto;
    position:absolute; 
}


#container .righe3 {
    width: 460px;
    height:2px;
    background: lightgrey;
    margin: 135px auto;
    position:absolute; 
}


#container .righe4 {
    width: 460px;
    height:2px;
    background: lightgrey;
    margin: 295px auto;
    position:absolute; 
}


.righe #nome, .righe1 #cognome, .righe2 #oggetto, .righe3 #messaggio
{
    margin-top:13px;
    margin-left:200px;
}


#intestazione
{
    height:45px;
    background-color:#666;        
}


.righe .nome_campi, .righe1 .nome_campi, .righe2 .nome_campi, .righe3 .nome_campi
{
position:absolute;    
top:13px;
left:15px;
}


.righe .freccia, .righe1 .freccia, .righe2 .freccia, .righe3 .freccia{
position:absolute;    
top:13px;
left:175px;  
color:red;
}


#container .testo_int{
position: absolute;
font-size:18px;
color:white;
text-transform: uppercase;
font-family: monospace;
margin-left:15px;
margin-top:13px;
}


#msg_errore_nome{
position:relative;
border:1px solid #666;
height:20px;
width:250px;
background-color:#FFF;
display:none;
top:-25px;
left:500px;
text-align:center;
}


#msg_errore_cognome{
position:relative;
border:1px solid #666;
height:20px;
width:250px;
background-color:#FFF;
display:none;
top:-25px;
left:500px;
text-align:center;
}


#msg_errore_oggetto{
position:relative;
border:1px solid #666;
height:20px;
width:250px;
background-color:#FFF;
display:none;
top:-25px;
left:500px;
text-align:center;
}


#msg_errore_messaggio{
position:relative;
border:1px solid #666;
height:20px;
width:250px;
background-color:#FFF;
display:none;
top:-25px;
left:500px;
text-align:center;
}


#check_nome, #check_cognome, #check_oggetto, #check_messaggio
{
    display:none;
    height:20px;
    width:20px;
    position:relative;
    top:-25px;
    left:500px;
}




</style>
</head>


<body>
   
    <form name="Form_contatti">
<div id="container">
    <div id="intestazione"><span class="testo_int">Contatta l'amministratore</span></div>
<div class="righe">
<label for="nome"><span class="nome_campi">Nome</span></label>
<span class="freccia">--></span>
<input type="text" name="nome" id="nome" />
<div id="msg_errore_nome"></div>
<img src="check.png" id="check_nome">
</div>


<div class="righe1">
<label for="nome"><span class="nome_campi">Cognome</span></label>
<span class="freccia">--></span>
<input type="text" name="cognome" id="cognome" />
<div id="msg_errore_cognome"></div>
<img src="check.png" id="check_cognome">
</div>


<div class="righe2">
<label for="nome"><span class="nome_campi">Oggetto</span></label>
<span class="freccia">--></span>
<input type="text" name="oggetto" id="oggetto" />
<div id="msg_errore_oggetto"></div>
<img src="check.png" id="check_oggetto">
</div>


<div class="righe3">
    <label for="nome"><span class="nome_campi">Messaggio</span></label>
    <span class="freccia">--></span>
<textarea name="messaggio" id="messaggio" rows="8" cols="25"></textarea>
<div id="msg_errore_messaggio"></div>
<img src="check.png" id="check_messaggio">
</div>


</div>
</form>
<input type="button" id="registrati" value="Registrati"></input>


</body>
</html>

codice:

function GestoreEventoPaginaCaricata()
{
 //prelevo l'id di ogni elemento   
var nome = document.getElementById('nome');
var cognome = document.getElementById('cognome');
var oggetto = document.getElementById('oggetto');
var messaggio = document.getElementById('messaggio');
var registrati = document.getElementById('registrati');
var msg_errore_nome = document.getElementById('msg_errore_nome');
var msg_errore_cognome = document.getElementById('msg_errore_cognome');
var msg_errore_oggetto = document.getElementById('msg_errore_oggetto');
var msg_errore_messaggio = document.getElementById('msg_errore_messaggio');
var immagine_N = document.getElementById("check_nome");
var immagine_CN = document.getElementById("check_cognome");
var immagine_O = document.getElementById("check_oggetto");
var immagine_M = document.getElementById("check_messaggio");


//tramite blur nel momento in cui esco dal campo viene eseguito il controllo
 nome.addEventListener('blur',ControllaNome);
 cognome.addEventListener('blur',ControllaCognome);
 oggetto.addEventListener('blur',ControllaOggetto);
 messaggio.addEventListener('blur',ControllaMessaggio);
 
function ControllaNome(){


if ((nome.value === '') || (nome.value === "undefined")){ 
 nome.style.background = 'red';
 msg_errore_nome.innerHTML = "<div class='msg_errore'>Devi compilare il "+nome.id+"</div>";
 msg_errore_nome.style.display = 'block';
 return false;
}


else{
nome.style.background = 'white';
msg_errore_nome.style.display = 'none';
immagine_N.style.display = 'block';
msg_errore_nome = '';
return true;
}
}


function ControllaCognome(){


if ((cognome.value === '' ) || (cognome.value === "undefined")){ 
 cognome.style.background = 'red';
 msg_errore_cognome.innerHTML = "<div class='msg_errore'>Devi compilare il "+cognome.id+"</div>";
 msg_errore_cognome.style.display = 'block';
 return false;
}


else{
cognome.style.background = 'white';
msg_errore_cognome.style.display = 'none';
immagine_CN.style.display = 'block';
msg_errore_cognome.innerHTML = '';
return true;
}
}


function ControllaOggetto(){


if ((oggetto.value === '' ) || (oggetto.value === "undefined")){ 
 oggetto.style.background = 'red';
 msg_errore_oggetto.innerHTML = "<div class='msg_errore'>Devi compilare il "+oggetto.id+"</div>";
 msg_errore_oggetto.style.display = 'block';
 return false;
}


else{
oggetto.style.background = 'white';
msg_errore_oggetto.style.display = 'none';
immagine_O.style.display = 'block';
msg_errore_oggetto.innerHTML = '';
return true;
}
}


function ControllaMessaggio(){


if ((messaggio.value === '' ) || (messaggio.value === "undefined")){ 
 messaggio.style.background = 'red';
 msg_errore_messaggio.innerHTML = "<div class='msg_errore'>Devi compilare il "+messaggio.id+"</div>";
 msg_errore_messaggio.style.display = 'block';
 return false;
}


else{
messaggio.style.background = 'white';
msg_errore_messaggio.style.display = 'none';
immagine_M.style.display = 'block';
msg_errore_messaggio.innerHTML = '';
return true;
}




}
}




window.addEventListener('load', GestoreEventoPaginaCaricata );

**m4rko80** · 11-12-2013, 10:23

Ciao, se non ho capito male ti riferisci alla lista

codice:

var nome = document.getElementById('nome');
....
...

Crea un array con nomi/id da ciclare

codice:

var fieldsName = ['nome','cognome',....];

e poi fai una cosa tipo

codice:

for(i=0; i<=fieldsName.length; i++){


fieldsName[i].addEventListener('blur',ControllaNome);

}

Giusto per darti un'idea poi dovrai modificare qualcosa.

[/code]

Discussione: Problema Form Javascript

Strumenti discussione

Ricerca discussione

Visualizza

Problema Form Javascript

Permessi di invio