HTML Validation with Javascript

December 09, 2013


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=iso-8859-1" />
<title>CoOl Javascript Validation</title>
<script type="text/javascript" src="cvalidate.js"></script>
<style type="text/css">
.heading
{
color:#0099FF;
font-weight:bolder;
font-size:20px;
}
.txt
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>

</head>

<body>

<form name="frmValidate" id="myform" action="" method="post" onsubmit="return validateForm('myform',true)">
<table width="350" border="0" cellspacing="0" cellpadding="5" align="center" bgcolor="#F4FAFF" style="border:1px solid #0099FF;">
  <tr>
    <td colspan="2" class="heading" align="center" style="border-bottom:1px solid #0099FF;"><a href="http://softproweb.blogspot.com/">Submit Form</a></td>
  </tr>
  <tr>
    <td colspan="2" class="heading" align="center" height="10"></td>
  </tr>

  <tr>
  <td align="left" class="txt">Username *</td>
<td align="right"><input type="text" name="username" id="username" size="28" title="Username" class="required alpha" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Password *</td>
<td align="right"><input type="password" name="password" id="password" size="28" title="Password" class="required alpha min 6 max 20 match cpassword" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Confirm Password *</td>
<td align="right"><input type="password" name="cpassword" id="cpassword" size="28" title="Confirm Password" class="required alpha" /></td>
  </tr>

  <tr>
  <td align="left" class="txt">First Name *</td>
<td align="right"><input type="text" name="fname" id="fname" size="28" title="First Name" class="required text" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Last Name</td>
<td align="right"><input type="text" name="lname" id="lname" size="28" title="Last Name" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Age *</td>
<td align="right"><input type="text" name="age" id="age" size="28" title="Age" class="required number min 10 max 100 " /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Email *</td>
<td align="right"><input type="text" name="email" id="email" size="28" title="Email" class="required email" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Phone *</td>
<td align="right"><input type="text" name="phone" id="phone" size="28" title="Phone" class="required regex ^\-?\d+$" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Fax</td>
<td align="right"><input type="text" name="fax" id="fax" size="28" title="Fax" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Date Of Birth *</td>
<td align="right"><input type="text" name="dob" id="dob" size="28" title="Date Of Birth" class="required date" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Website *</td>
<td align="right"><input type="text" name="website" id="website" size="28" title="Website" class="required web" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Country *</td>
<td align="left">&nbsp;
<select name="country" id="country" title="Country" class="required">
<option value="">--- Select ---</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
<option value="Pakistan">Pakistan</option>
<option value="Other">Other</option>
</select>
</td>
  </tr>
<tr>
  <td align="left" class="txt">Gender *</td>
<td align="left">
<input type="radio" name="gender" value="m" title="Gender" class="required" />Male
<input type="radio" name="gender" value="f" title="Gender" class="required" />Female
</td>
  </tr>

    <tr>
  <td align="left" class="txt">Disclaimer *</td>
<td align="left">
<input type="checkbox" name="disclaimer" value="1" title="Disclaimer" class="required" />
</td>
  </tr>
  <tr>
<td align="right" colspan="2">
<input type="submit" name="btnSubmit" value="Submit Form" />
</td>
  </tr>

</table>
</form>
<br /><br />

Screen Shot:
HTML Validation with Javascript

HTML Validation with Javascript



You Might Also Like

13 comments

Popular Posts

Like us on Facebook

Flickr Images