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
user name .i am not getting for the other fields can u tell me how to do it..
if possible using CSS also.i have written code for CSS also....
i am displaying the HTML page also...
Code:
<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>
below is the HTML code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
<form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
<label for="name">Full Name:</label>
<input type="text" name="name" id="name" />
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" />
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
<label for="repassword">Retype Password:</label>
<input type="text" name="repassword" id="repassword" />
<label for="phoneno">Phone no:</label>
<input type="text" name="phoneno" id="phoneno" />
<input type="submit" value="Submit" class="submit" />
</form>
</div>
</body>
</html>
below is the css
Code:
*
{
margin:0;
padding:0;
}
body
{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#666;
}
#wrapper
{
width:600px;
margin:50px auto;
}
.form
{
float:left;
padding:10px 10px 10px 10px;
background:#f3f3f3;
border:2px solid #cfcfcf;
}
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px;
font-weight:bold;
clear:left;
}
.form select
{
float:left;
width:146px;
margin-top:10px;
}
.form input
{
float:left;
margin-top:10px;
}
.form .submit
{
clear:both;
}
#msg
{
display:none;
position:absolute;
z-index:200;
background:url(images/msg_arrow.gif) left center no-repeat;
padding-left:7px;
}
#msgcontent
{
display:block;
background:#f3e6e6;
border:2px solid #924949;
border-left:none;
padding:5px;
min-width:150px;
max-width:250px;
}
new form
