Form Validation in JavaScript

Here we are going to teach you how to create form validation in HTML and CSS using JavaScript. I give source code given below step by step. You can create page like, 1. index.html 2. style.css 3. form validate.js and copy the source code given below or you can also download complete source code by clicking Download Source Code Link..

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
<title>JavaScript Form Validation </title>
<link rel=”stylesheet” href=”css/style.css”>
<script type=”text/javascript” src=”js/form_validate.js” ></script>
</head>
<body>
<br /><br />
  <h2 align=”center”>
Form Validation in JavaScript </h2>
<center>
<br /><br />
<form id=”theForm” method=”get” action=”submitData” >
<table id=”font”>
<tr>
<td width=”168″>Name<span class=”red”>*</span></td>
 <td width=”288″><input type=”text” id=”name” name=”name” class=”input1″/></td>
<td width=”183″ class=”red” id=”nameError”> </td>
</tr>
<tr>
<td>Address</td>
<td><input type=”email” id=”address” class=”input1″ /></td>
<td id=”addressError” class=”red”> </td>
</tr>
<tr>
<td>Pin Code<span class=”red”>*</span></td>
<td><input type=”text” id=”zipcode” name=”zipcode” class=”input1″/></td>
<td id=”zipcodeError” class=”red”> </td>
</tr>
<tr>
<td>Country<span class=”red”>*</span></td>
<td><select id=”country” name=”country” class=”input1″>
<option value=”” selected>Please select…</option>
<option value=”India”>India</option>
<option value=”Pakistan”>Pakistan</option>
<option value=”Afganistan”>Afganistan</option>
<option value=”Australia”>Australia</option>
</select><br /></td>
<td id=”countryError” class=”red”> </td>
</tr>
<tr>
<td>Gender<span class=”red”>*</span></td>
 <td><p>
<input type=”radio” name=”gender” value=”m” />
   Male
   <input type=”radio” name=”gender” value=”f” />
       Female</p>
</td>
<td id=”genderError” class=”red”> </td>
</tr>
<tr>
<td>Preferences<span class=”red”>*</span></td>
 <td><p>
<input type=”checkbox” name=”color” value=”r” />
   Red
<input type=”checkbox” name=”color” value=”g” />
       Green
       <input type=”checkbox” name=”color” value=”b” />
       Blue</p>
</td>
<td id=”colorError” class=”red”> </td>
</tr>
<tr>
<td>Phone<span class=”red”>*</span></td>
<td><input type=”text” id=”phone” name=”phone” class=”input1″/></td>
<td id=”phoneError” class=”red”> </td></tr>
<tr>
<td>Email<span class=”red”>*</span></td>
<td><input type=”text” id=”email” name=”email” class=”input1″/></td>
<td id=”emailError” class=”red”> </td>
</tr>
<tr>
<td>password <span class=”red”>*</span></td>
<td><input type=”password” id=”password” name=”password” class=”input1″/></td>
<td id=”passwordError” class=”red”> </td>
</tr>
<tr>
<td>Verify password<span class=”red”>*</span></td>
<td><input type=”password” id=”pwVerified” name=”pwVerified” class=”input1″/></td>
<td id=”pwVerifiedError” class=”red”> </td>
</tr>
<tr>
<td><input name=”submit” type=”submit” class=”input1″ id=”submit” value=”Submit”/></td>
<td><p>
<input name=”reset” type=”reset” class=”input1″ id=”reset” value=”Reset”/>
       </p>
</td>
<td> </td></tr>
</table>
</form>
</center>
</body>
</html>

Style.css

<html>
 <head>
  <title>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-color:skyblue;
}
.red {
color: red;
}

.input1{
width:200px;
height:30px;
padding:0px;
border:1px solid red;
border-radius:5px;
}
input.error{

width:200px;
height:30px;
padding:0px;
border:2px solid red;
border-radius:5px;
}

table {
border:0;

}

td {
margin: 0;
padding: 3px 10px 3px 3px;
}
#font{
font-size:18;
color:black

}
  Html Cursor Code
  </title>

form validate.js

<html>
 <head>
  <title>
  Html Cursor Code
  </title>window.onload = init;
function init() {
document.getElementById(“theForm”).onsubmit = validateForm;
document.getElementById(“reset”).onclick = clearDisplay;
document.getElementById(“name”).focus();
}
function validateForm() {
return (isNotEmpty(“name”, “Please enter your name!”)
&& isNumeric(“zipcode”, “Please enter a 5-digit zip code!”)
&& isLengthMinMax(“zipcode”, “Please enter a 5-digit zip code!”, 5, 5)
&& isSelected(“country”, “Please make a selection!”)
&& isChecked(“gender”, “Please check a gender!”)
&& isChecked(“color”, “Please check a color!”)
&& isNumeric(“phone”, “Please enter a valid phone number!”)
&& isValidEmail(“email”, “Enter a valid email!”)
&& isLengthMinMax(“password”, “Enter a valid password!”, 6, 8)
&& verifyPassword(“password”, “pwVerified”, “Different from the password!”));
}

function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function showMessage(isValid, inputElement, errorMsg, errorElement) {
if (!isValid) {
if (errorElement !== null) {
errorElement.innerHTML = errorMsg;
} else {
alert(errorMsg);
}
if (inputElement !== null) {
inputElement.className = “error”;
inputElement.focus();
}
} else {
if (errorElement !== null) {
errorElement.innerHTML = “”;
}
if (inputElement !== null) {
inputElement.className = “”;
}
}
}

function isNumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.search(/^[0-9]+$/) !== -1);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function isAlphabetic(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = inputValue.match(/^[a-zA-Z]+$/);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isAlphanumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = inputValue.match(/^[0-9a-zA-Z]+$/);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isLengthMinMax(inputId, errorMsg, minLength, maxLength) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length >= minLength) && (inputValue.length <= maxLength);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isValidEmail(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value;
var atPos = inputValue.indexOf(“@”);
var dotPos = inputValue.lastIndexOf(“.”);
var isValid = (atPos > 0) && (dotPos > atPos + 1) && (inputValue.length > dotPos + 2);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function isSelected(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value;
var isValid = inputValue !== “”;
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isChecked(inputName, errorMsg) {
var inputElements = document.getElementsByName(inputName);
var errorElement = document.getElementById(inputName + “Error”);
var isChecked = false;
for (var i = 0; i < inputElements.length; i++) {
if (inputElements[i].checked) {
isChecked = true;
break;
}
}
showMessage(isChecked, null, errorMsg, errorElement);
return isChecked;
}
function verifyPassword(pwId, verifiedPwId, errorMsg) {
var pwElement = document.getElementById(pwId);
var verifiedPwElement = document.getElementById(verifiedPwId);
var errorElement = document.getElementById(verifiedPwId + “Error”);
var isTheSame = (pwElement.value === verifiedPwElement.value);
showMessage(isTheSame, verifiedPwElement, errorMsg, errorElement);
return isTheSame;
}

function clearDisplay() {
var elms = document.getElementsByTagName(“*”);
for (var i = 0; i < elms.length; i++) {
if ((elms[i].id).match(/Error$/)) {
elms[i].innerHTML = “”;
}
if (elms[i].className === “error”) {
elms[i].className = “”;
}
}
document.getElementById(“name”).focus();
}

Source Code

Advertisement

Tuesday, May 3, 2016

Form Validation in JavaScript

Form Validation in JavaScript

Index.html

Style.css

form validate.js

Preview

About Unknown -

Popular Posts

Find us on Facebook

Advertisement

Labels

Total Pageviews

Instagram posts

Category

About us