inline validation form
Hi all,
i have created one simple login form with 5 fields namely username,email id,password,retype password and phone no.i have created alert message for each function,so that when there is an error it displays alert message..
now i have to replace all alert messages with inline validation(displays errors beside textbox)..
kindly tell me how to do it.......
<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var sRealname = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealname);
if (!isCorrectFormat)
{
alert("Incorrect format.");
textbox.select();
textbox.focus();
return false;
}
else
{
alert("Correct format");
return true;
}
if (sRealName == '')
{
alert('Error: Username cannot be blank!');
form.realname.focus();
return false;
}
else if (sRealName.length < 4)
{
alert("UserName should be atleast 4 characters long");
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}
alert('Invalid E-mail Address! Please re-enter.');
return false;
}
function validatePwd(form) /* password & retype-password verification */
{
var invalid = ' ';
minLength = 6;
var pw1 = form.password.value;
var pw2 = form.password2.value;
if (pw1 == '' || pw2 == '')
{
alert('Please enter your password twice.');
return false;
}
if (form.password.value.length < minLength)
{
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}
if (document.form.password.value.indexOf(invalid) > -1)
{
alert('Sorry, spaces are not allowed.');
return false;
}
else
{
if (pw1 != pw2)
{
alert('You did not enter the same new password twice. Please re-enter your password.');
return false;
}
else
{
alert('Passwords Match.');
return false;
}
return false;
}
}
function validPhone(form) /* phone no validation */
{
var valid = '0123456789';
phone = form.phoneno.value;
if (phone == '')
{
alert('This field is required. Please enter phone number');
return false;
}
if (!phone.length > 1 || phone.length < 10)
{
alert('Invalid phone number length! Please try again.');
return false;
}
for (var i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
alert('Invalid characters in your phone. Please try again.');
return false;
}
}
return true;
}
function validate()
{
var form = document.forms['form'];
if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
{
return false;
}
return true;
}
</script>
</head>
<body>
<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19">
<br>
E-Mail : <input type="text" name="email" size="25">
<br>
Password : <input type="password" name="password" maxlength="12" size="25">
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25">
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
|
