Good day...
I am new to javascript...
I created a simple validation using javascript alone.but my problem is when I press enter the browser aumatically refresh..
this is my code js code..
var validid=false;
var validname=false;
var validaddress=false;
var validzip=false;
var validemail=false;
function idiit()
{
var uid = document.form1.userid;
var name = document.form1.username;
var add = document.form1.address;
var zipcode = document.form1.zipcode;
var email = document.form1.email;
var gender = document.form1.gender;
if(userid_validation(uid) && validid==true)
{
if(allLetter(name) && validname==true)
{
if(alphanumeric(add) && validaddress==true)
{
if(allnumeric(zipcode) && validzip==true)
{
if(ValidateEmail(email) && validemail==true)
{
if(validsex(gender))
{
alert("Thank you!!");
}
}
}
}
}
}
}
function userid_validation(uid)
{
var uid_len = uid.value.length;
if (uid_len == 0)
{
document.getElementById("error").style.visibility="visible";
document.getElementById("id").style.visibility="visible";
document.getElementById("userid").style.borderColor="red";
validid=false;
}
else
{
document.getElementById("check").style.visibility="visible";
document.getElementById("error").style.visibility="hidden";
document.getElementById("id").style.visibility="hidden";
validid=true;
}
return validid;
}
function allLetter(name)
{
var letters = /^[A-Za-z]+$/;
if(name.value.match(letters))
{
document.getElementById("check1").style.visibility="visible";
document.getElementById("error1").style.visibility="hidden";
document.getElementById("nameuser").style.visibility="hidden";
validname=true;
}
else
{
document.getElementById("error1").style.visibility="visible";
document.getElementById("username").style.borderColor="red";
document.getElementById("nameuser").style.visibility="visible";
validname=false;
}
return validname;
}
function alphanumeric(add)
{
var letters = /^[0-9a-zA-Z]+$/gi;
if(add.value.match(letters))
{
document.getElementById("check2").style.visibility="visible";
document.getElementById("error2").style.visibility="hidden";
document.getElementById("location").style.visibility="hidden";
validaddress=true;
}
else
{
document.getElementById("error2").style.visibility="visible";
document.getElementById("location").style.visibility="visible";
document.getElementById("address").style.borderColor="red";
validaddress= false;
}
return validaddress;
}
function allnumeric(zipcode)
{
var numbers = /^[0-9]+$/;
if(zipcode.value.match(numbers))
{
document.getElementById("check3").style.visibility="visible";
document.getElementById("error3").style.visibility="hidden";
document.getElementById("code").style.visibility="hidden";
validzip=true;
}
else
{
document.getElementById("error3").style.visibility="visible";
document.getElementById("zipcode").style.borderColor="red";
document.getElementById("code").style.visibility="visible";
validzip=false;
}
return validzip;
}
function ValidateEmail(email)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(email.value.match(mailformat))
{
document.getElementById("check4").style.visibility="visible";
document.getElementById("error4").style.visibility="hidden";
document.getElementById("emailadd").style.visibility="hidden";
validemail=true;
}
else
{
document.getElementById("error4").style.visibility="visible";
document.getElementById("emailadd").style.visibility="visible";
document.getElementById("email").style.borderColor="red";
validemail= false;
}
return validemail;
}
function validsex(gender)
{
if ( (gender[0].checked == false ) && (gender[1].checked == false ) )
{
return false;
}
else
{return true;}
}
function setStyle()
{
document.getElementById("userid").style.borderColor="blue";
}this is my html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript sample registration from validation Code - w3resource</title>
<script type='text/javascript' src="js.js"></script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<form name='form1' onsubmit="idiit()" method="get">
<table cellpadding="3">
<tr>
<td>User id </td>
<td><input type="text" name="userid" onfocus="setStyle()" id="userid"/></td>
<td><img width="8" height="8" src="img/check.png" id="check"><img width="8" height="8" src="img/error.png" id="error"><span id="id">This is required!</span></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="username" onfocus="setStyle()" id="username"/></td>
<td><img width="8" height="8" src="img/check.png" id="check1"><img width="8" height="8" src="img/error.png" id="error1"><span id="nameuser">This is required!</span></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onfocus="setStyle(this.id)" id="address"/></td>
<td><img width="8" height="8" src="img/check.png" id="check2"><img width="8" height="8" src="img/error.png" id="error2"><span id="location">This is required!</span></td>
</tr>
<tr>
<td>ZIP Code </td>
<td><input type="text" name="zip" onfocus="setStyle(this.id)" id="zipcode"/></td>
<td><img width="8" height="8" src="img/check.png" id="check3"><img width="8" height="8" src="img/error.png" id="error3"><span id="code">This is required!</span></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" onfocus="setStyle(this.id) " id="email"/></td>
<td><img width="8" height="8" src="img/check.png" id="check4"><img width="8" height="8" src="img/error.png" id="error4"><span id="emailadd">This is required!</span></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" /> Female</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit" /></td>
<td><input type="reset" name="reset" value="Reset" /></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>this is my css code.
table tr td img{visibility: hidden;}
table tr td span{visibility: hidden;}
input{outline: none;}please help me...
could anybody explain why I got this error??
thnks in advance...