...

View Full Version : form using inline validation



ravi9510
07-26-2011, 02:58 PM
Hi all,
i have created one simple login form with 5 fields namely username,email id,password,retype password and phone no.and i have created one alert message for each function so that it displays alert message when there is an error.
now i want to replace alert message with INLINE VALIDATION(displays beside text only)....
kindly tell me how to do....
below is the code i have written using alert message.......



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

Philip M
07-26-2011, 05:49 PM
Display your error message in a <span> positioned next to the textbox. You can use css to style the displayed text. Hide the message again when focus is placed on the input textbox.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

ravi9510
07-27-2011, 06:19 AM
can you show me for one function so that i can do it for rest of the functions.....

Philip M
07-27-2011, 09:10 AM
Example:-


function checkName(form) {
document.getElementById("Span1").style.display="none"; // clear the previous message
var sRealname = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealname);

if (!isCorrectFormat) {
document.getElementById("span1").style.display=""; // display the message inline
document.getElementById("span1").innerHTML = "&nbsp&nbspIncorrect Format!";
form.realname.select();
form.realname.focus();
return false;
}
else {
document.getElementById("Span1").style.display="none"; // clear the previous message
return true;
}


and the HTML



User Name : <input type="text" name="realname" size="19"><span id = "span1" style="display:none"></span>

You can style the message text (font size,color etc) using css.

Note that this section of your code will never be executed:-


if (sRealName == '')
{
alert('Error: Username cannot be blank!');
form.realname.focus();
return false;
}
else if (sRealName.length < 4)
{
alert("UserName should be at least 4 characters long");
return false;
}

return true;
}


as above validation returns true if the format is correct.

ravi9510
07-27-2011, 10:33 AM
you are telling me that if sRealName is blank or not filled or sRealName length is less than 4 characters it will never execute..
if i deliberately give sRealName a 3 characters it must display an error
or if ignore sRealName value it must also display an error..
then what to do to execute these......

prasanthmj
07-27-2011, 11:32 AM
Try this form validation script (http://www.javascript-coder.com/html-form/form-validation.phtml). You can show inline error messages



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum