Validation Form

+1 Hossein Vahabi · June 6, 2014
Hey guys, It's my simple source for validation, need help !


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>register</title>
<style type="text/css">
form{
width:360px;
padding:5px;
}
label{
display:block;
width:170px;
font-size:18px;
}
input[type="text"]{
width:200px;
border: 2px solid #666;
padding:5px;
background: #CCC;
}
input[type="submit"]{
width:100px;
background: #066;
color: #fff;
margin-top: 10px;
padding:5px;
}
div{
display:inline-block;
}
</style>
<script language="javascript">

function validate(){
var valName = document.getElementById('txt1').value;
var name = /[0-9]+/;
var valFamily = document.getElementById('txt2').value;
var family = /[0-9]+/;
var valID = document.getElementById('txt3').value;
var id = /[A-Z]+/;
var valEmail = document.getElementById('txt4').value;
var email = /[0-9]+/;


if(valName == '' name.test(valName)){
var error1 = document.getElementById('val1');
error1.innerHTML = "<img src='honey_star.gif' width='15px' height='15px' />";
return false;
}
if(!name.test(valName)){
var error1 = document.getElementById('val1');
error1.innerHTML = "<img src='tick01.jpg' width='15px' height='15px' />";
return false;
}
if(valFamily == '' family.test(valFamily)){
var error2 = document.getElementById('val2');
error2.innerHTML = "<img src='honey_star.gif' width='15px' height='15px' />";
return false;
}
if(!family.test(valFamily)){
var error2 = document.getElementById('val2');
error2.innerHTML = "<img src='tick01.jpg' width='15px' height='15px' />";
return false;
}
if(valID == '' id.test(valID)){
var error3 = document.getElementById('val3');
error3.innerHTML = "<img src='honey_star.gif' width='15px' height='15px' />";
return false;
}
if(!id.test(valID)){
var error3 = document.getElementById('val3');
error3.innerHTML = "<img src='tick01.jpg' width='15px' height='15px' />";
return false;
}
if(valEmail == '' email.test(valEmail)){
var error4 = document.getElementById('val4');
error4.innerHTML = "<img src='honey_star.gif' width='15px' height='15px' />";
return false;
}
if(!email.test(valEmail)){
var error4 = document.getElementById('val4');
error4.innerHTML = "<img src='tick01.jpg' width='15px' height='15px' />";
return false;
}
}
</script>

</head>

<body>
<form action="second.html" method="post" onSubmit="return validate()">

<label>Name :</label><input type="text" id="txt1" name="txt1" />   <div id="val1"></div>
<br />
<label>Family :</label><input type="text" id="txt2" name="txt2" />   <div id="val2"></div>
<br />
<label>National Code ID :</label><input type="text" id="txt3" name="txt3" />   <div id="val3"></div>
<br />
<label>Email :</label><input type="text" id="txt4" name="txt4" />   <div id="val4"></div>
<br />
<input type="submit" value="Register Now!" id="btn" name="btn" />

</form>

</body>
</html>



where is exactly my wrong ?
cause it only show images in val1 !! -__-

thanks.

Post a Reply

Replies

Oldest  Newest  Rating
0 Hossein Vahabi · June 7, 2014
thanks for reply guys :)))

here i made it now ...


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
form{
width:360px;
padding:5px;
}
label{
display:block;
width:170px;
font-size:18px;
}
input[type="text"]{
width:200px;
border: 2px solid #666;
padding:5px;
background: #CCC;
}
input[type="submit"]{
width:100px;
background: #066;
color: #fff;
margin-top: 10px;
padding:5px;
}
div{
display:inline-block;
}
</style>
<script>
function validate(){

var name = document.getElementById('txt1').value;
var family = document.getElementById('txt2').value;
var id = document.getElementById('txt3').value;
var email = document.getElementById('txt4').value;

// special regulars
var number = /[a-zA-Z0-9]+/;
var string = /[0-9]+/;
var mail = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

// check name text box
if(name == ''){
var a = document.getElementById('1');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
if(number.test(name)){
var b = document.getElementById('1');
b.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';
}
if(!number.test(name)){

if(family == ''){
var a = document.getElementById('1');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}else if(!number.test(name) && !name == ''){
var c = document.getElementById('1');
c.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}

}


// check family text box
if(family == ''){
var a = document.getElementById('2');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
if(number.test(family)){
var b = document.getElementById('2');
b.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';
}
if(!number.test(family)){
if(family == ''){
var a = document.getElementById('2');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}else if(!number.test(family) && !family == ''){
var c = document.getElementById('2');
c.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
}

// check id text box
if(id == ''){
var a = document.getElementById('3');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
if(string.test(id)){
var a = document.getElementById('3');
a.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';
}
if(!string.test(id)){
if(family == ''){
var a = document.getElementById('3');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}else if(!string.test(id) && !id == ''){
var a = document.getElementById('3');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
}

//check email text box
if(email == ''){
var a = document.getElementById('4');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
if(mail.test(email)){
var a = document.getElementById('4');
a.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';
}
if(!mail.test(email)){
if(family == ''){
var a = document.getElementById('4');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}else if(!mail.test(email) && !email == ''){
var a = document.getElementById('4');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';
}
}


return false;
}

</script>

</head>

<body>

<form action="second.html" method="post" onSubmit="return validate()">

<label>Name :</label><input type="text" id="txt1" name="txt1" />   <div id="1" name="1"></div>
<br />
<label>Family :</label><input type="text" id="txt2" name="txt2" />   <div id="2" name="2"></div>
<br />
<label>National Code ID :</label><input type="text" id="txt3" name="txt3" />   <div id="3" name="3"></div>
<br />
<label>Email :</label><input type="text" id="txt4" name="txt4" />   <div id="4" name="4"></div>
<br />
<input type="submit" value="Register Now!" id="btn" name="btn" />

</form>

</body>
</html>



// guys you need 2 pictures here ... change the pics to some text.

bye bye !!
-1 Jay Deshaun · June 8, 2014
Did you fix all the errors?
0 Hossein Vahabi · June 9, 2014
It's okay now.

Java Script :



<script>
function validate(){

var name = document.getElementById('txt1').value;
var family = document.getElementById('txt2').value;
var id = document.getElementById('txt3').value;
var email = document.getElementById('txt4').value;


// special regulars
var number = /^([a-zA-Z?-?]{3,15})$/; // only like these markups would verifyed
var string = /^\d{3}-\d{6}-\d{1}$/; // iranian national id code
var mail = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/; // for emails






// check name text box
if(name == ''){
var a = document.getElementById('1');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er1');
not.innerHTML = '???? ??? ???? ???.';
not.style.background = '#f90';
}
if(number.test(name)){

var b = document.getElementById('1');
b.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er1');
not.innerHTML = '??? ???? ???? ?? ??? ???.';
not.style.background = '#090';

}
if(!number.test(name) && !name == ''){

var c = document.getElementById('1');
c.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er1');
not.innerHTML = '???? ???? ?? ??? ???? ???? ???.';
not.style.background = '#c30';

}





// check family text box
if(family == ''){
var a = document.getElementById('2');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er2');
not.innerHTML = '???? ??? ???????? ???? ???.';
not.style.background = '#f90';
}
if(number.test(family)){

var c = document.getElementById('2');
c.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er2');
not.innerHTML = '??? ???? ???? ?? ??? ???.';
not.style.background = '#090';

}
if(!number.test(family) && !family == ''){

var b = document.getElementById('2');
b.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er2');
not.innerHTML = '???? ???? ?? ??? ???? ???? ???.';
not.style.background = '#c30';

}





// check id text box
if(id == ''){
var a = document.getElementById('3');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er3');
not.innerHTML = '???? ????? ???? ??? ???? ???.';
not.style.background = '#f90';
}
if(string.test(id)){
var a = document.getElementById('3');
a.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er3');
not.innerHTML = '??? ???? ???? ?? ??? ???.';
not.style.background = '#090';

}
if(!string.test(id) && !id == ''){
var a = document.getElementById('3');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er3');
not.innerHTML = '???? ???? ????? ???? ??? ?? ??? ???? ???? ???.';
not.style.background = '#c30';
}






//check email text box
if(email == ''){
var a = document.getElementById('4');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er4');
not.innerHTML = '???? ????? ???? ???.';
not.style.background = '#f90';
}
if(mail.test(email)){
var a = document.getElementById('4');
a.innerHTML = '<img src="tick.jpg" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er4');
not.innerHTML = '??? ???? ???? ?? ??? ???.';
not.style.background = '#090';

}
if(!mail.test(email) && !email == ''){
var a = document.getElementById('4');
a.innerHTML = '<img src="star.gif" width="15px" height="15px" />';

// it's a notice that users knows what goin on
var not = document.getElementById('er4');
not.innerHTML = '???? ???? ????? ?? ??? ???? ???? ???';
not.style.background = '#c30';
}






// let form goes or not
if(!mail.test(email) && !email == '' email == '' !string.test(id) && !id == '' id == ''
!number.test(family) && !family == '' family == '' !number.test(name) && !name == ''
name == ''){

return false;

}else{

return true;

}

}


 
  • 1

Javascript

129,874 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators