javascript inline validation
Hi all,
i have created a simple login form with 5 fields namely username,email id,password,retype password and phone no using inline validation.
after entering fields for username,email id and password and when clicking the submit button it should ask for retype your password and after entering value for retype password only it should display whether passwords are matching or not
but instead it is showing passwords are not matching before entering value for retype password only...
kindly check my code whats gone wrong and correct it please.....
also my cursor should move from one textbox to another instead it is going directly to lastfield(phoneno) field......
below is my code...
Code:
<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var eobj=document.getElementById('realnameerror');
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var error=false;
eobj.innerHTML='';
if (sRealName == '') {
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
else if (!oRE.test(sRealName))
{
error="Incorrect format.";
}
if (error)
{
form.realname.focus();
eobj.innerHTML=error;
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
var eobj=document.getElementById('emailerror');
eobj.innerHTML='';
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}
eobj.innerHTML='Invalid E-mail Address! Please re-enter.';
return false;
}
function validatePwd(form) /* password & retype-password verification */
{
var eobj1=document.getElementById('passworderror');
var eobj2=document.getElementById('password2error');
var minLength=6;
var invalid=' ';
var pw1=form.password.value;
var pw2=form.password2.value;
var error=false;
eobj1.innerHTML='';
eobj2.innerHTML='';
if (pw1.length<1)
{
error='Please enter your password.';
}
else if (pw1.length < minLength)
{
error='Your password must be at least ' + minLength + ' characters long. Try again.';
}
else if (pw1.indexOf(invalid) > -1)
{
error='Sorry, spaces are not allowed.';
}
if (error)
{
form.password.focus();
eobj1.innerHTML=error;
return false
}
if (pw1 != pw2)
{
eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
return false;
}
return true;
}
function validPhone(form) /* phone no validation */
{
var eobj=document.getElementById('phonenoerror');
var valid = '0123456789';
var phone = form.phoneno.value;
var error=false;
var i=0;
var temp;
eobj.innerHTML='';
if (phone == '')
{
error='This field is required. Please enter phone number';
}
else if (!phone.length > 1 || phone.length < 10)
{
error='Invalid phone number length! Please try again.';
}
else
{
for (i=0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
error='Invalid characters in your phone. Please try again.';
}
}
}
if (error)
{
form.phoneno.focus();
eobj.innerHTML=error;
return false;
}
return true;
}
function validate()
{
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++)
{
if (!ary[z0](form))
{
rtn=false;
}
}
return rtn;
}
</script>
</head>
<body>
<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
<br>
E-Mail : <input type="text" name="email" size="25"><span id="emailerror" ></span>
<br>
Password : <input type="password" name="password" maxlength="12" size="25"><span id="passworderror" ></span>
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25"><span id="password2error" ></span>
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25"><span id="phonenoerror" ></span>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Re: javascript inline validation
your loop will continue running through your functions, and each function will replace the last error message with a new one. the last function you're calling is validPhone, so that will be error message displayed at the end. you probably want to stop validating if there is ever an error, though, or make an array of error messages that you can display.
anyway, to make your script stop after an error has occurred, just add a break statement in your validate function:
Code:
function validate()
{
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++)
{
if (!ary[z0](form))
{
rtn=false;
break;
}
}
return rtn;
}
This tells JavaScript to break out of your for loop when an error has occurred.
edit: after just looking over your code, it looks like you have a separate error element for each field, so nevermind about the array of errors suggestion I made. instead, you could call your validate functions backwards so that the first field is validated last, leaving it to have the focus rather than the last field. this means you also don't need the break statement.
