Uite un exemplu de validare :
poti sa il adaptezi dupa nevoile tale
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.error {
margin-top:5px;
margin-left:10px;
display:none;
float:left;
font-style:italic;
color:#F00;}
#finalizeaza_comanda input {float:left;}
#finalizeaza_comanda textarea {float:left;}
.finaliz {border:1px solid #F00;}
.finaliz td {border:0px;}
.finaliz tr{border:1px solid #F00;}
#finalizare {
margin:auto;
margin-top:50px!IMPORTANT;
color:#F69;
font-size:22px;
text-align:center;}
.ok {
display:none;
float:left;
margin-left:10px;
}
.ok img {
width:20px!important;
height:20px!important;
float:right;}
</style>
<script type="text/javascript" >
function characters(){
var comment = document.getElementById("comment").value;
var len = comment.length;
document.getElementById("chars_left").innerHTML = 150-len + " characters left";
valid_comment();
}
function sterge() {
var r=confirm("Toate datele introduse in formular vor fi sterse!");
if (r) {
document.forms['formular'].reset();
$('.error').css('display','none');
$('.ok').css('display','none');
/* document.getElementById("name_error").style.display="none";
document.getElementById("adresa_error").style.display="none";
document.getElementById("adresa_error").style.display="none";
document.getElementById("prenume_error").style.display="none";
document.getElementById("email_error").style.display="none";
document.getElementById("telefon_error").style.display="none";
*/ characters();
}
}
$('.ok').css('display','none');
function valid_name (pointer)
{
var name = document.getElementById("name").value;
if (name.length<2)
{
document.getElementById("name_error").style.display="block";
document.getElementById("name_ok").style.display="none";
pointer.value=0;
}
else
{
document.getElementById("name_error").style.display="none";
document.getElementById("name_ok").style.display="block";
}
}
function valid_adresa (pointer)
{
var name = document.getElementById("adresa").value;
if (name.length<10)
{
document.getElementById("adresa_error").style.display="block";
document.getElementById("adresa_ok").style.display="none";
pointer.value=0;
}
else
{
document.getElementById("adresa_error").style.display="none";
document.getElementById("adresa_ok").style.display="block";
}
}
function valid_prenume(pointer)
{
var prenume = document.getElementById("prenume").value;
if (prenume.length<2)
{
document.getElementById("prenume_error").style.display="block";
document.getElementById("prenume_ok").style.display="none";
pointer.value=0;
}
else
{
document.getElementById("prenume_error").style.display="none";
document.getElementById("prenume_ok").style.display="block";
}
}
function valid_mail(pointer) {
var email = document.getElementById("email").value;
var reg =/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(reg.test(email) == false) {
document.getElementById("email_error").style.display="block";
document.getElementById("email_ok").style.display="none";
pointer.value=0;
}
else{
document.getElementById("email_error").style.display="none";
document.getElementById("email_ok").style.display="block";
}
}
function valid_telefon(pointer)
{
var telefon = document.getElementById("telefon").value;
var phone_valid = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s.]{0,1}[0-9]{3}[-\s.]{0,1}[0-9]{4}$/;
if(phone_valid.test(telefon)==false) {
document.getElementById("telefon_error").style.display="block";
document.getElementById("telefon_ok").style.display="none";
pointer.value=0;
}
else{
document.getElementById("telefon_error").style.display="none";
document.getElementById("telefon_ok").style.display="block";
}
}
function validation (){
var ok={};
valid_name(ok);
valid_prenume(ok);
valid_telefon(ok);
valid_adresa(ok);
valid_mail(ok);
if (ok.value==0)
//{
//alert ("Datele introduse nu sunt corecte!");
return false;
//}
}
</script>
</head>
<body >
<form name="formular" id="finalizeaza_comanda" action="index.php?page=finalizare" method="post" onsubmit="return validation();" >
<table class='finaliz' align='left' cellspacing="10px;">
<tr>
<td>Nume : </td>
<td>
<input name="name" type="text" id="name" onchange="valid_name()"/>
<span class="error" id="name_error">Numele trebuie sa aiba minim 2 caractere!</span>
<span class="ok" id="name_ok"><img src="images/ok.jpg" width="80" height="80"></span>
</td>
</tr>
<tr>
<td>Prenume :</td>
<td>
<input name="prenume" type="text" id="prenume" onchange="valid_prenume()"/>
<span class="error" id="prenume_error">Prenumele trebuie sa aiba minim 2 caractere!</span>
<span class="ok" id="prenume_ok"><img src="images/ok.jpg" width="80" height="80"></span>
</td>
</tr>
<tr>
<td>Telefon :</td>
<td>
<input name="telefon" type="text" id="telefon" maxlength="14" onchange="valid_telefon()"/>
<span class="error" id="telefon_error">Exemple numere de telefon acceptate: (123) 456-7890 / 123-456-7890<br />123.456.7890 / 1234567890</span>
<span class="ok" id="telefon_ok"><img src="images/ok.jpg" width="80" height="80"></span>
</td>
</tr>
<tr>
<td>Adresa : </td>
<td>
<input type="text" name="adresa" id="adresa" onchange="valid_adresa();" />
<span class="error" id="adresa_error">Nu ati completat adresa! Minim 10 caractere.</span>
<span class="ok" id="adresa_ok"><img src="images/ok.jpg"></span>
<span style="clear:both;"></span>
</td>
</tr>
<tr>
<td>Email : </td>
<td>
<input name="email" type="text" id="email" onchange="valid_mail()"/>
<span class="error" id="email_error">Adresa de mail nu este valida!</span>
<span class="ok" id="email_ok"><img src="images/ok.jpg" width="80" height="80"></span>
</td>
</tr>
<tr>
<td>Comentariu :</td>
<td>
<textarea rows="7" name="comentariu" maxlength="150" id="comment" onkeyup="characters();"></textarea>
<div style="clear:both; padding-left:5px;" id="chars_left" >150 characters left</div>
<script type="text/javascript">window.ready = characters();</script>
</td>
</tr>
<tr>
<td>Livrare produse : </td>
<td>
<input name="livrare" checked="checked" type="radio" value="Posta" id="da"/>
Posta
<br/>
<input name="livrare" type="radio" value="Curier rapid" id="nu"/>
Curier rapid</td>
</tr>
<tr>
<td> </td>
<td><button name="reseteaza_formular" type="button" onClick="sterge();" >Reset</button></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="confirma" value="Confirma comanda" />
</td>
</tr>
</table>
</form>
</body>
Aici ai fisierul sursa si folderul cu imaginea 'ok.jpg' :
http://www65.zippyshare.com/v/17048987/file.html
Vin Iul 20, 2012 5:58 pm
Prima pagină
Autentificare
Înregistrare
Căutare