form inline validation

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

form inline validation

ravi951
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 as to display an alert message..
i want the form to display messages using INLINE VALIDATION(displaying beside text box only) ...
can u tell me what is the procedure for that.......

below is the code i written using alert messages.......
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>
/code