JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
Home » Javascript »
About Javascript
Javascript Innerhtml Form Validations.
JavaScript Innerhtml Form Validations.
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="10" max="100">
<button onclick="myFunction()">OK</button>
<p>If the number is less than 10 or greater than 100, an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
</html>
Range Overflow Validations.
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
} else {
txt = "Input OK";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Range underflow Validations.
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
} else {
txt = "Input OK";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Inner Html Form JsValidations.
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>
innerHTMLValidation.js
File Name:- innerHTMLValidation.js
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;
}