Search jQuery

jQuery Forum

form using inline validation

in Using jQuery • 11 years ago

Hi all,

i have written code for simple login page with 5 fields namely username,email id,password,retype password and phone number.i have created one alert message for each function..

now i want to replace an alert box with inline validation(displaying errors beside textbox) using div tag(if possible)

kindly tell me how to do it...

below is my code .......

<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>