PDA

View Full Version : form inline validation



ravi951
07-26-2011, 06:51 AM
Hi all,
i have created one simple login form with 5 fields namely username,email id,password and retype password and phone no.i have created one alert message for each function so that when there is an error an alert message is displayed ..
now i want to replace an alert message with inline validation(displays error beside textbox)...
kindly tell me how to do that..
below is the code i have written........


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

vwphillips
07-26-2011, 11:18 AM
I corrected and modified function checkName, I will let you do the rest


<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var eobj= document.getElementById('realnameerror');
eobj.innerHTML='';
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealName);
var error=false;
if (!isCorrectFormat)
{
error="Incorrect format.";
form.realname.select();
form.realname.focus();
}

else if (sRealName == '')
{
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
if (error){
eobj.innerHTML=error;
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"><span id="realnameerror" ></span>
<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>

ravi951
07-26-2011, 11:23 AM
Please tell me in brief,what changes u have done for checkName function which is displaying as inline validation....

ravi951
07-28-2011, 09:03 AM
hi all,
below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
checkName() .i am not getting for the other fields can u 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 eobj=document.getElementById('realnameerror');
eobj.innerHTML='';
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealName);
var error=false;
if (!isCorrectFormat)
{
error="Incorrect format.";
form.realname.select();
form.realname.focus();
}

else if (sRealName == '')
{
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
if (error){
eobj.innerHTML=error;
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"><span id="realnameerror" ></span>
<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>

ravi951
07-28-2011, 11:17 AM
I corrected and modified function checkName, I will let you do the rest


<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var eobj= document.getElementById('realnameerror');
eobj.innerHTML='';
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealName);
var error=false;
if (!isCorrectFormat)
{
error="Incorrect format.";
form.realname.select();
form.realname.focus();
}

else if (sRealName == '')
{
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
if (error){
eobj.innerHTML=error;
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"><span id="realnameerror" ></span>
<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>
hi i have not getting for password and retype password field...
can u tell me how to do it........

vwphillips
07-28-2011, 01:21 PM
<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">

function checkName(form){
var eobj=document.getElementById('realnameerror'),sRealName = form.realname.value,oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i,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'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password.value,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){
eobj1.innerHTML=error;
return false
}
if (pw1 != pw2){
eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
return false;
}
return true;
}

function validPhone(form){ /* phone no validation */
var eobj=document.getElementById('phonenoerror'),valid = '0123456789',phone = form.phoneno.value,error=false,i=0,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 < 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'],ary=[checkName,checkEmail,validatePwd,validPhone],rtn=true,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>

ravi951
07-29-2011, 04:21 AM
hi,
the script is working fine with username and email id but when i enter input for password field and clicking the submit button it is not asking for re enter password but showing error message for phone no field.
why it is not showing for retype password field....

vwphillips
07-29-2011, 06:57 AM
function validatePwd(form){ /* password & retype-password verification */
var eobj1=document.getElementById('passworderror'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password2.value,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){
eobj1.innerHTML=error;
return false
}
if (pw1 != pw2){
eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
return false;
}
return true;
}

ravi951
07-29-2011, 07:12 AM
hi,
when i enter value for first field i.e., username as ravi and click the submit button then cursor is moving to the last field i.e.,phone no field.
the cursor is not moving continuous.....

ravi951
07-29-2011, 08:45 AM
function validatePwd(form){ /* password & retype-password verification */
var eobj1=document.getElementById('passworderror'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password2.value,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){
eobj1.innerHTML=error;
return false
}
if (pw1 != pw2){
eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
return false;
}
return true;
}


hi
after entering values for username,email id and password and clicking the submit button it is displaying the message passwords are not matching. but instead it should ask for please reenter ur password and then it should check whether both passwords and retype passwords are matching or not...
can u tell me how to do it...

vwphillips
07-29-2011, 11:16 AM
I see you are posting this on a least two other forums which is wasting everones time

but is you use the the last function I posted it will work

ravi951
07-29-2011, 11:28 AM
no if we enter password field and press enter it is asking for passwords not matching even before we entered any value for retype password ....
check it once.....also verify the cursor positioning

vwphillips
07-29-2011, 01:32 PM
<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">

function checkName(form){
var eobj=document.getElementById('realnameerror'),sRealName = form.realname.value,oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i,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.';
form.email.focus();
return false;
}

function validatePwd(form){ /* password & retype-password verification */
var eobj1=document.getElementById('passworderror'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password2.value,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.';
}
eobj1.innerHTML=error;
form.password.focus();
return false
}

else if (pw1 != pw2){
eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
form.password2.focus();
return false;
}
return true;
}

function validPhone(form){ /* phone no validation */
var eobj=document.getElementById('phonenoerror'),valid = '0123456789',phone = form.phoneno.value,error=false,i=0,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 < 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'],ary=[checkName,checkEmail,validatePwd,validPhone],rtn=true,z0=0;
for (var z0=0;z0<ary.length;z0++){
if (!ary[z0](form)){
rtn=false;
}
}
return rtn;
}

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