Hiba kiírása div-be hogyan? (lejjeb a lényeg)
Van egy JS kódolásom ami kiírja a div-be a hibát de az a gond vele hogy csak eggyet ír ki mit tehetnék vele??
a kód:
<html>
<body>
<head>
<script type="text/javascript">
function proba(){
var ok = true
var name = document.ellenoriz.name.value.length;
var mail = document.ellenoriz.mail.value.length;
var password = document.ellenoriz.password.value;
var re_password = document.ellenoriz.re_password.value;
if(name<4){
document.getElementById('error').innerHTML= 'A neved túl rövid <p>';
ok=false;
}
else if(name>15){
document.getElementById('error').innerHTML= 'A neved túl hosszú <p>';
ok=false;
}
if(mail<9){
document.getElementById('error').innerHTML= 'Az E-mail címed túl rövid <p>';
ok=false;
}
else if(mail>30){
document.getElementById('error').innerHTML= 'Az E-mail címed túl hosszú <p>' ;
ok=false;
}
if(password.length<6){
document.getElementById('error').innerHTML= 'A jelszavad túl rövid <p>' ;
ok=false;
}
else if(password.length>20){
document.getElementById('error').innerHTML= 'A jelszavad túl hosszú <p>' ;
ok=false;
}
if(password!=re_password){
document.getElementById('error').innerHTML= 'A két jelszó nem eggyezik meg <p>' ;
ok=false;
}
if(ok){
document.getElementById('rendben').innerHTML= 'A regisztráció sikeres';
document.getElementById('error').innerHTML= '';
}else {
return;
document.getElementById('error').innerHTML= '';
document.getElementById('rendben').innerHTML= ' ';
}
}
</script>
</head>
<body>
<div style="background: green; width: 400px; height: auto; text-align: center;" id="rendben" ></div>
<div style="background: red; width: 400px; text-align: center;" id="error" ></div>
<form name="ellenoriz">
<table>
<tr><td> Neved: </td><td> <input type="text" name="name"> </td></tr>
<tr><td> E-mail cím: </td><td> <input type="text" name="mail"> </td></tr>
<tr><td> Jelszó: </td><td> <input type="password" name="password"> </td></tr>
<tr><td> Jelszó újra: </td><td> <input type="password" name="re_password"> </td></tr>
</table>
<input type="button" value="Regisztrálok" onclick="proba()">
</form>
</body>
</html>
Persze, hogy csak egy stringet fogsz visszakapni, mivel minden egyes elágazásban, ha a feltétel teljesül, akkor felüldefiniálod az előző értéket.
Az lehet egy megoldás, hogy az előző kiírandó hibához, mondjuk sortöréssel hozzáfűzöd a következőt, ha ennél a módszernél maradsz, mint amin elindultál.
Megcsináltam amit első írt, meg kicsit javítottam a kódon, nem kell mindig a documentből indulni, ki lehet venni egy változóba a div-et, és az nem jó, hogy <p> volt a végén, mert nem lesz lezárva, inkább egy <br />-t tettem:
<html>
<body>
<head>
<script type="text/javascript">
function proba(){
var ok = true
var name = document.ellenoriz.name.value.length;
var mail = document.ellenoriz.mail.value.length;
var password = document.ellenoriz.password.value;
var re_password = document.ellenoriz.re_password.value;
var error = document.getElementById('error');
error.innerHTML = "";
if(name<4){
error.innerHTML+= 'A neved túl rövid <br />';
ok=false;
}
else if(name>15){
error.innerHTML+= 'A neved túl hosszú <br />';
ok=false;
}
if(mail<9){
error.innerHTML+= 'Az E-mail címed túl rövid <br />';
ok=false;
}
else if(mail>30){
error.innerHTML+= 'Az E-mail címed túl hosszú <br />' ;
ok=false;
}
if(password.length<6){
error.innerHTML+= 'A jelszavad túl rövid <br />' ;
ok=false;
}
else if(password.length>20){
error.innerHTML+= 'A jelszavad túl hosszú <br />' ;
ok=false;
}
if(password!=re_password){
error.innerHTML+= 'A két jelszó nem eggyezik meg <br />' ;
ok=false;
}
if(ok){
document.getElementById('rendben').innerHTML= 'A regisztráció sikeres';
}else {
return;
}
}
</script>
</head>
<body>
<div style="background: green; width: 400px; height: auto; text-align: center;" id="rendben" ></div>
<div style="background: red; width: 400px; text-align: center;" id="error" ></div>
<form name="ellenoriz">
<table>
<tr><td> Neved: </td><td> <input type="text" name="name"> </td></tr>
<tr><td> E-mail cím: </td><td> <input type="text" name="mail"> </td></tr>
<tr><td> Jelszó: </td><td> <input type="password" name="password"> </td></tr>
<tr><td> Jelszó újra: </td><td> <input type="password" name="re_password"> </td></tr>
</table>
<input type="button" value="Regisztrálok" onclick="proba()">
</form>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!