Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





Inner html form validation using javascript

javascript inneer inlinlne Html Form Validations.

File Name:- index.php

<!DOCTYPE HTML>
<html>
<head>
<title>Aimer World | Home :: Free Dating site</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/Form.css" rel="stylesheet" type="text/css">



<script type="text/javascript">
function validateForm()
{

var x=document.forms["frm"]["iam"];
if (x.value=="")
{
document.getElementById('erroriam').innerHTML="Please select.";
x.focus();
return false;
}

document.getElementById('erroriam').innerHTML='';


var x = document.forms['frm']['datepicker'];
if(x.value=="")
{
document.getElementById('errordob').innerHTML="Please select your DateOfBirth";
x.focus();
return false;
}

var x=document.forms["frm"]["country"];
if (x.value=="")
{
document.getElementById('errorcountry').innerHTML="Please select Country.";
x.focus();
return false;
}

document.getElementById('erroriam').innerHTML='';


x=document.frm.pcode;
if(x.value=="")
{
x.value="";
document.getElementById('errorpcode').innerHTML="Please enter the postcode.";
x.focus();
return false;
}
else if(isNaN(x.value))
{
x.value="";
document.getElementById('errorpcode').innerHTML="Please enter only digits.";
x.focus();
return false;
}
else if(x.value.length!=6)
{
x.value="";
document.getElementById('errorpcode').innerHTML="Please enter only 6 digits.";
x.focus();
return false;
}
document.getElementById('errorpcode').innerHTML="";




var emailpattern =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.([a-zA-Z]{2,4})$/
/*if (document.frm.email.value == "")
{
document.getElementById('erroremail').innerHTML = "Please enter your email.";
return false;
}*/
x=document.frm.email;
if(x.value=="")
{
x.value="";
document.getElementById('erroremail').innerHTML="Please Enter Your Email.";
x.focus();
return false;
}
else if(!emailpattern.test(x.value))
{
x.value="";
document.getElementById('erroremail').innerHTML="Please enter a valid email address.";
x.focus();
return false;
}
document.getElementById('erroremail').innerHTML="";


var x=document.forms["frm"]["uname"];
if (x.value=="")
{
document.getElementById('erroruname').innerHTML="Please enter the first name.";
x.focus();
return false;
}

else if(x.value.length>20)
{
x.value="";
document.getElementById('erroruname').innerHTML="Please enter less than 20 characters.";
x.focus();
return false;
}
else if ((!namepattern.test(x.value)))
{
document.getElementById('erroruname').innerHTML="Please enter only alphabets.";
x.value="";
x.focus();
return false;
}

document.getElementById('erroruname').innerHTML='';


/*
else if (document.frm.pass.value == "")
{
document.getElementById('errorpass').innerHTML = "Please enter your password.";
return false;
}
else
{
return true;
}
*/
var x = document.forms["frm"]["pass"];
if (x.value == "") {

document.getElementById('errorpass').innerHTML = "Please enter the Password.";
x.focus();
return false;
}
else if (x.value.length < 5) {
x.value = "";
document.getElementById('errorpass').innerHTML = "Password must be at least 5 characters long.";
x.focus();
return false;
}
document.getElementById('errorpass').innerHTML = '';



}// end function.

</script>

<script src="js/jquery-1.11.1.min.js"></script>


</head>

<body>
<div class="header">
<div class='container'>
<div class="header_left">
<a href="index.php"><img src="images/rate.png" alt=""/></a>
</div>
<div class="logo">
<a href="index.php"><img src="images/logo.png" alt=""/>

</a>
</div>
<div class="header_right">
<ul class="header_user_info">
<a class="login" href="login.php">
<li class="user_desc"><span class="m_1">Already user ? </span>Login</li>
<i class="user"> </i>
<div class="clearfix"> </div>
</a>
<div class="clearfix"> </div>
</ul>
<a href="register.php" class="btn1 btn-1 btn1-1b">Sign Up</a>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="profile_banner">
<div class="container">
<h3>Register</h3>
<p>&nbsp;</p>
</div>
</div>
<div class='profiles'>
<div class="container">


<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#d26e8e">Register for free to meet new people and start chatting and dating today :)</font></h4>
<div class="register">
<div class="text-slider">

<div class="col-sm-4 pull-right">
<div class="drive-form">

<!--======= FORM =========-->
<form role="form" id="find_course" name="frm" method="post" onsubmit="return validateForm()" action="register_action.php">
<ul class="row">

<!--======= INPUT NAME =========-->
<li class="col-sm-12">
<center><h4 style="color:red;"><?php echo isset($_GET["msg"])?$_GET["msg"]:"";?></h4></center>


<label>I am</label>


<div class="form-group">
<select id="iam" name="iam">
<option value="">Select</option>
<option value="a woman seeking a man">a woman seeking a man</option>
<option value="a man seeking a woman">a man seeking a woman</option>
<option value="a woman seeking a woman">a woman seeking a woman</option>
<option value="a man seeking a man">a man seeking a man</option>
</select><p id="erroriam" style="color:red;"></p>

</div>


</li>



<!--======= INPUT PHONE NUMBER =========-->
<li class="col-sm-6">
<label>I was born on</label><p id="errordob" style="color:red;"></p>
<div class="form-group">
<input type="text" name="datepicker" class="form-control" id="datepicker" placeholder="DD/MM/YY">
</div>
</li>

<!--======= INPUT SELECT =========-->
<li class="col-sm-6">
<label>My country of residence</label>
<div class="form-group">
<select class="i-select" id="country" name="country"><option value="" selected="selected">--- Please Select ---</option><option value="US">United States</option><option value="CA">Canada</option><option value="separator">------------</option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="AG">Algeria</option><option value="AN">Andorra</option><option value="AO">Angola</option><option value="AV">Anguilla</option><option value="FS">Antarctica</option><option value="AC">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AA">Aruba</option><option value="AS">Australia</option><option value="AU">Austria</option><option value="AJ">Azerbaijan</option><option value="BF">Bahamas</option><option value="BA">Bahrain</option><option value="BG">Bangladesh</option><option value="BB">Barbados</option><option value="BO">Belarus</option><option value="BE">Belgium</option><option value="BH">Belize</option><option value="BN">Benin</option><option value="BD">Bermuda</option><option value="BT">Bhutan</option><option value="BL">Bolivia</option><option value="BK">Bosnia and Herzegovina</option><option value="BC">Botswana</option><option value="BR">Brazil</option><option value="BX">Brunei</option><option value="BU">Bulgaria</option><option value="UV">Burkina Faso</option><option value="BY">Burundi</option><option value="CB">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="CV">Cape Verde</option><option value="CJ">Cayman Islands</option><option value="CT">Central African Republic</option><option value="CD">Chad</option><option value="CI">Chile</option><option value="CH">China</option><option value="KT">Christmas Islands</option><option value="CK">Cocos Islands</option><option value="CO">Colombia</option><option value="CN">Comoros</option><option value="CG">Congo</option><option value="CF">Congo</option><option value="CW">Cook Islands</option><option value="CS">Costa Rica</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CY">Cyprus</option><option value="EZ">Czech Republic</option><option value="DA">Denmark</option><option value="DJ">Djibouti</option><option value="DO">Dominica</option><option value="DR">Dominican Republic</option><option value="NT">Dutch antilles</option><option value="TT">EastTimor</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="ES">El Salvador</option><option value="EK">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EN">Estonia</option><option value="ET">Ethiopia</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji Islands</option><option value="FI">Finland</option><option value="FR">France</option><option value="FP">French Polynesia</option><option value="GB">Gabon</option><option value="GA">Gambia</option><option value="GG">Georgia</option><option value="GM">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GJ">Grenada</option><option value="GP">Guadaloupe</option><option value="GT">Guatemala</option><option value="GK">Guernsey</option><option value="GV">Guinea</option><option value="PU">Guinea-Bissau</option><option value="FG">Guyana</option><option value="GY">Guyana</option><option value="HA">Haiti</option><option value="HO">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IC">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IZ">Iraq</option><option value="EI">Ireland</option><option value="IM">Isle of Man</option><option value="IS">Israel</option><option value="IT">Italy</option><option value="IV">Ivory coast</option><option value="JM">Jamaica</option><option value="JA">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KR">Kiribati</option><option value="KU">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LG">Latvia</option><option value="LE">Lebanon</option><option value="LT">Lesotho</option><option value="LI">Liberia</option><option value="LY">Libya</option><option value="LS">Liechtenstein</option><option value="LH">Lithuania</option><option value="LU">Luxembourg</option><option value="MC">Macao</option><option value="MK">Macedonia</option><option value="MA">Madagascar</option><option value="MI">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="RM">Marshall Islands</option><option value="MB">Martinique</option><option value="MR">Mauritania</option><option value="MP">Mauritius</option><option value="MF">Mayotte</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MD">Moldova</option><option value="MN">Monaco</option><option value="MG">Mongolia</option><option value="MJ">Montenegro</option><option value="MH">Montserrat</option><option value="MO">Morocco</option><option value="MZ">Mozambique</option><option value="BM">Myanmar</option><option value="WA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NU">Nicaragua</option><option value="NG">Niger</option><option value="NI">Nigeria</option><option value="NE">Niue</option><option value="NF">Norfolk Island</option><option value="KN">North Korea</option><option value="NO">Norway</option><option value="MU">Oman</option><option value="PK">Pakistan</option><option value="PS">Palau</option><option value="WE">Palestine</option><option value="PM">Panama</option><option value="PP">Papua New-Guinea</option><option value="PA">Paraguay</option><option value="PE">Peru</option><option value="RP">Philippines</option><option value="PC">Pitcairn island</option><option value="PL">Poland</option><option value="PO">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RE">Reunion</option><option value="RO">Romania</option><option value="RS">Russia</option><option value="RW">Rwanda</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="TP">Sao Tome and Principe</option><option value="SA">Saudi Arabia</option><option value="SG">Senegal</option><option value="RI">Serbia</option><option value="SE">Seychelles</option><option value="SL">Sierra Leone</option><option value="SN">Singapore</option><option value="LO">Slovakia</option><option value="SI">Slovenia</option><option value="BP">Solomon island</option><option value="SO">Somalia</option><option value="SF">South Africa</option><option value="SX">South Georgia Island and South Sandwich Islands</option><option value="KS">South Korea</option><option value="SP">Spain</option><option value="CE">Sri Lanka</option><option value="SH">St Helens</option><option value="SC">St Kitts and Nevis</option><option value="ST">St Lucia</option><option value="SB">St Peter and Miquelon</option><option value="VC">St Vincent and the Grenadines</option><option value="SU">Sudan</option><option value="NS">Suriname</option><option value="SV">Svalbard</option><option value="WZ">Swaziland</option><option value="SW">Sweden</option><option value="SZ">Switzerland</option><option value="SY">Syria</option><option value="TW">Taiwan</option><option value="TI">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TO">Togo</option><option value="TL">Tokelau</option><option value="TN">Tonga</option><option value="TD">Trinidad and Tobago</option><option value="TS">Tunisia</option><option value="TU">Turkey</option><option value="TX">Turkmenistan</option><option value="TK">Turks and Caicos Islands</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UP">Ukraine</option><option value="AE">United Arab Emirates</option><option value="UK">United Kingdom</option><option value="US">United States</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="NH">Vanuatu</option><option value="VE">Venezuela</option><option value="VM">Vietnam</option><option value="VI">Virgin Islands</option><option value="WF">Wallis and Futuna</option><option value="WI">Western Sahara</option><option value="YM">Yemen</option><option value="ZA">Zambia</option><option value="ZI">Zimbabwe</option></select><p id="errorcountry" style="color:red;"></p>
</div>
</li>



<!--======= INPUT EMAIL =========-->
<li class="col-sm-12">
<label>My postcode</label><p id="errorpcode" style="color:red;"></p>
<div class="form-group">
<input type="text" class="form-control" id="pcode" name="pcode" placeholder="Postcode" value="<?php if(isset($_POST['pcode'])) echo $_POST['pcode']; ?>">
</div>
</li>

<!--======= INPUT PHONE NUMBER =========-->
<li class="col-sm-12">
<label>My email address</label><p id="erroremail" style="color:red;"></p>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>">
</div>
</li>



<!--======= INPUT PHONE NUMBER =========-->
<li class="col-sm-12">
<label>Choose a username</label><p id="erroruname" style="color:red;"></p>
<div class="form-group">
<input type="text" class="form-control" id="uname" name="uname" placeholder="Username" value="<?php if(isset($_POST['uname'])) echo $_POST['uname']; ?>">
</div>
</li>


<!--======= INPUT PHONE NUMBER =========-->
<li class="col-sm-12">
<label>My password</label><p id="errorpass" style="color:red;"></p>
<div class="form-group">
<input type="password" class="form-control" id="pass" name="pass" placeholder="Password" >
</div>
</li>



</ul>

<div class="clearfix"> </div>
<a class="news-letter" href="#">
<label class="checkbox"><input type="checkbox" name="checkbox1" unchecked="" value="yes"><i> </i>I certify that I am over 18 and have read and accepted the terms &amp; conditions, the privacy policy and the cookie policy.</label></a>

<a class="news-letter" href="#">
<label class="checkbox"><input type="checkbox" name="checkbox2" unchecked="" value="yes"><i> </i>Yes, I'd like to receive email offers from partners of Aimer world.</label></a>



<!--======= BUTTON =========-->
<div class="text-center">
<button type="submit" value="submit" name="submit" class="btn" id="btn_submit">Continue</button>
</div>
</form>
</div>

</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>


</body>
</html>


FORM VALIDATION USING INNERHTML HTML JAVASCRIPT

File name : index.php

<html >
<head>

<!--validation-->
<script typ="text/javascript" src="innerHTMLValidation.js" ></script>

</head>

<body>
<div class="container">
<div class="content">
<center>
<form name="form1" method="post" action="success.html">
<fieldset>

<h1>Demo Registration Form</h1>
<table border='0'>
<tr>
<td><LABEL for="firstname">First Name:<sup style="color:#F00">*</sup> </LABEL></td>
<td><INPUT type="text" id="firstname"></td><td width="200px"><i style="color:red;" id="pointfn"></i></td>
</tr>
<tr>
<td><LABEL for="lastname">Last Name:<sup style="color:#F00">*</sup> </LABEL></td>
<td><INPUT type="text" id="lastname"></td><td width="200px"><i style="color:red;" id="pointln"></i></td>
</tr>

<tr>
<td><LABEL for="gender">Gender:<sup style="color:#F00">*</sup> </LABEL></td> <td><INPUT type="radio" name="gender" value="Male"> Male
<INPUT type="radio" name="gender" value="Female"> Female</td><td width="200px"> <i style="color:red;" id="pointgendr"></i></td>
</tr>
<tr>
<td><LABEL for="dob">Date of Birth:<sup style="color:#F00">*</sup> </LABEL></td>
<td>
<select id="dd">
<option value="dd">DD</option>
<script type="text/javascript">
for(var i=1;i<32;i++)
document.write("<option value='"+i+"'>" + i+"</option> ");
</script>
</select>
</select>
<select id="mmm">
<option value="mmm">MMM</option>
<option value="0">JAN</option>
<option value="1">FEB</option>
<option value="2">MAR </option>
<option value="3">APR</option>
<option value="4">MAY</option>
<option value="5">JUN</option>
<option value="6">JUL</option>
<option value="7">AUG</option>
<option value="8">SEP</option>
<option value="9">OCT</option>
<option value="10">Nov</option>
<option value="11">DEC</option>
</select>
<select id="yyyy">
<option value="yyyy"selected>YYYY</option>
<script type="text/javascript">
var dt= new Date();
for(var i=1979;i<=dt.getFullYear()-18;i++)
document.write("<option value='"+i+"'>" + i+"</option> ");
</script>
</select>
</td><td width="200px"><i style="color:red;" id="pointdob"></i>
</td>
</tr>
<tr>
<td><LABEL for="address" style="text-align:left;">Address:<sup style="color:#F00">*</sup> </LABEL></td>
<td><textarea id="address" name="address" rows="4" cols="20"></textarea></td><td width="200px"><i style="color:red;" id="pointadrs"></i>
</td>


</tr>
<tr>
<td><LABEL for="contctno">Contact Number:<sup style="color:#F00">*</sup> </LABEL></td>
<td><INPUT type="text" id="contctno"></td><td width="200px"><i style="color:red;" id="pointcontct"></i></td>
</tr>
<tr>
<td><LABEL for="email">Email:<sup style="color:red;">*</sup> </LABEL></td>
<td><INPUT type="text" id="email"></td><td width="200px"><i style="color:red;" id="pointemail"></i></td>
</tr>
<tr>
<td></td><td><br/><INPUT type="submit" onClick="return validateForm()" value="Submit">
<INPUT type="reset" onClick="return confirmreset()"></td>
</tr>

<tr>
<td></td><td style="font-size:12px;text-align:right;"><br/><i style="color:red;font-size:12px;align:right;" >* - Mandatory</i></td>
</tr>
</table>
<fieldset>
</FORM></center>
</div>
</div>


</body>
</html>

JAVASCRIPT CODE: innerHTMLValidation.js

File name : index.php

var namepattern=/^[a-zA-Z]+$/
var phonepattern = /^\d{10}$/
var emailpattern =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.([a-zA-Z]{2,4})$/
var emailpattern2 =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*$/
var idpattern=/^\d{6}$/;

function validateForm()
{

var x=document.forms["form1"]["firstname"];
if (x.value=="")
{

document.getElementById('pointfn').innerHTML="Please enter the first name.";
x.focus();
return false;
}

else if(x.value.length>20)
{
x.value="";
document.getElementById('pointfn').innerHTML="Please enter less than 20 characters.";
x.focus();
return false;
}
else if ((!namepattern.test(x.value)))
{
document.getElementById('pointfn').innerHTML="Please enter only alphabets.";
x.value="";
x.focus();
return false;
}

document.getElementById('pointfn').innerHTML='';

x=document.forms["form1"]["lastname"];

if(x.value=="")
{
document.getElementById('pointln').innerHTML="Please enter the Last name.";
x.focus();
return false;
}
else if(x.value.length>20)
{
x.value="";
document.getElementById('pointln').innerHTML="Please enter less than 20 characters.";
x.focus();
return false;
}
else if (!namepattern.test(x.value))
{
x.value="";
document.getElementById('pointln').innerHTML="Please enter only alphabets.";
x.focus();
return false;
}
document.getElementById('pointln').innerHTML="";
if((document.form1.gender[0].checked==false)&&(document.form1.gender[1].checked==false))
{
document.form1.gender[0].focus();
document.getElementById('pointgendr').innerHTML='Please select a gender.';
return false;
}
document.getElementById('pointgendr').innerHTML='';
var dd=document.form1.dd.value;
var mmm=document.form1.mmm.value;
var yyyy=document.form1.yyyy.value;
if(!validdate(dd,mmm,yyyy))
{
document.getElementById('pointdob').innerHTML="Plaese select a valid date.";
return false;
}

document.getElementById('pointdob').innerHTML="";
x= document.getElementById("address");
if(x.value==null || x.value=="" )
{
x.value="";
document.getElementById('pointadrs').innerHTML="Please enter the address.";
x.focus();
return false;
}
else if(x.value.length<20)
{
x.value="";
document.getElementById('pointadrs').innerHTML="Please enter atleast 20 characters.";
x.focus();
return false;
}
document.getElementById('pointadrs').innerHTML="";

x=document.form1.contctno;

if(x.value=="")
{

x.value="";
document.getElementById('pointcontct').innerHTML="Please enter the contact number.";
x.focus();
return false;
}
else if(isNaN(x.value))
{
x.value="";
document.getElementById('pointcontct').innerHTML="Please enter only digits.";
x.focus();
return false;
}
else if(x.value.length!=10)
{
x.value="";
document.getElementById('pointcontct').innerHTML="Please enter only 10 digits.(Mobile number)";
x.focus();
return false;
}
else if(!phonepattern.test(x.value))
{
x.value="";
document.getElementById('pointcontct').innerHTML="Please enter a valid contact number.";
x.focus();
return false;
}
document.getElementById('pointcontct').innerHTML="";

x=document.form1.email;
if(x.value=="")
{
x.value="";
document.getElementById('pointemail').innerHTML="Please enter the email id.";
x.focus();
return false;
}
else if(!emailpattern.test(x.value))
{
x.value="";
document.getElementById('pointemail').innerHTML="Please enter a valid email address.";
x.focus();
return false;
}
document.getElementById('pointemail').innerHTML="";
return confirm("Do you want to submit the form?");
}
function validdate(dd,mm,yyyy)
{
var dateobj = new Date(yyyy, mm, dd);
var datecurrent= new Date();
if((dateobj.getMonth()!=mm)||(dateobj.getDate()!=dd)||(dateobj.getFullYear()!=yyyy)||(dateobj>datecurrent))
{
return false;
}
return true;
}

function confirmreset()
{
if(confirm("Do you want to reset the form?"))
{
document.getElementById('pointfn').innerHTML="";
document.getElementById('pointln').innerHTML="";
document.getElementById('pointgendr').innerHTML="";
document.getElementById('pointdob').innerHTML="";
document.getElementById('pointadrs').innerHTML="";
document.getElementById('pointcontct').innerHTML="";
document.getElementById('pointemail').innerHTML="";
return true;
}
else
return false;
}

validation without submit button.

File name : index.php

<html>
<head>
<script>

function validateform()
{
var x = document.getElementById("first").value;
if(x==null || x =="")
{
document.getElementById("fname").innerHTML="please enter first name";
}
var y = document.getElementById("lastname").value;
if(y==null || y =="")
{
document.getElementById("last").innerHTML="enter your last name";
}
}

</script>
</head>
</body>

<table border="0">
<form name="phorm" action="demo.php" method="post" onSubmit="return validateform()">
<tr>
<td>first name : <input type="text" id="first" onBlur="validateform()"></td><td><p id="fname"></p></td>
</tr>

<tr>
<td>Last name : <input type="text" id="lastname" onBlur="validateform()"></td><td><p id="last"></p></td>
</tr>

<tr>
<td>number : <input type="text" name="number" ></td>
</tr>
</form>
</table>
</body>
</html>

validation with javascript functions.

File name : index.php

<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">

var hasFocus = false;

function checkName(form)
{
var eobj=document.getElementById('realnameerror');
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var error=false;
eobj.innerHTML='';
if (sRealName == '') {
error='Error: Username cannot be blank!';
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
else if (!oRE.test(sRealName))
{
error="Incorrect format.";
}
if (error)
{
if (hasFocus == false) {
form.realname.focus();
hasFocus = true;
}
eobj.innerHTML=error;
return false;
}
return true;
}

function checkEmail(form) /* for email validation */
{
var eobj=document.getElementById('emailerror');
eobj.innerHTML='';
var error = false;
if (form.email.value.length == 0) {
error = 'Please enter email.';
} else if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(form.email.value))
{
return true;
} else {
error = 'Invalid E-mail Address! Please re-enter.';
}
if (error) {
eobj.innerHTML=error;
if (!hasFocus) {
form.email.focus();
hasFocus = true;
}
return false;
}

return true;
}

function validatePwd(form) /* password & retype-password verification */
{
var eobj1=document.getElementById('passworderror');
var eobj2=document.getElementById('password2error');
var minLength=6;
var invalid=' ';
var pw1=form.password.value;
var pw2=form.password2.value;
var 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.';
} else if (pw2.length == 0) {
error='Please retype password.';
if (!hasFocus) {
form.password2.focus();
hasFocus = true;
}
eobj2.innerHTML=error;
return false;
}
if (error)
{
if (!hasFocus) {
form.password.focus();
hasFocus = true;
}
eobj1.innerHTML=error;
return false
}
if (pw1 != pw2)
{
eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
if (!hasFocus) {
form.password2.focus();
hasFocus = true;
}
return false;
}
return true;
}

function validPhone(form) /* phone no validation */
{
var eobj=document.getElementById('phonenoerror');
var valid = '0123456789';
var phone = form.phoneno.value;
var error=false;
var i=0;
var 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=0; 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)
{
if (!hasFocus) {
form.phoneno.focus();
hasFocus = true;
}
eobj.innerHTML=error;
return false;
}
return true;
}

function validate()
{
hasFocus = false;
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var 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>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link