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();
}

Preview

SLIDESHOW IN JAVASCRIPT

By Unknown 4:59 AM No comments:

SLIDESHOW IN JAVASCRIPT

Hello Friends!! Here I have upload a Slideshow source code of calendar in JavaScript, in this code I will try to teach you how to create image slideshow in JavaScript going to easy steps. Of you want to learn this tutorial, Copy the below code and save to your computer index.html and slideshow.js after that run code into browser or download complete source click on Download Source Code Link given below..

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
                   <title>Slideshow</title>
<script type=”text/JavaScript” scr=”slideshow.js”> </script>
<style type=”text/css”>
<!–
.style3 {font-size: 18px; font-weight: bold; }
–>
 </style>
</head>
<body>
<center>
<br><br><br><br>
<img src=”images/1.jpg” name=”slideshow”><br><br>
</center>
<table width=”204″ height=”28″ align=”center” bordercolor=”#FF0000″ bgcolor=”#000000″>
<tr border=”3″ bordercolor=”green”>
<td align=”right”><a href=”javascript:chgImg(-1)”><button><span class=”style3″>Previous</span></button>
</a></td>
<td align=”center”><a href=”javascript:auto()”><button><span class=”style3″>Auto/Stop</span></button>
</a></td>
<td align=”left”><a href=”javascript:chgImg(1)”><button><span class=”style3″>Next</span></button>
</a></td></tr>
</table>
</body>
</html>
<br />

Slideshow.js

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
                   <title>Slideshow</title>
<script type=”text/JavaScript” scr=”slideshow.js”> </script>
<style type=”text/css”>
<!–
.style3 {font-size: 18px; font-weight: bold; }
–>
 </style>
</head>
<body>
<center>
<br><br><br><br>
<img src=”images/1.jpg” name=”slideshow”><br><br>
</center>
<table width=”204″ height=”28″ align=”center” bordercolor=”#FF0000″ bgcolor=”#000000″>
<tr border=”3″ bordercolor=”green”>
<td align=”right”><a href=”javascript:chgImg(-1)”><button><span class=”style3″>Previous</span></button>
</a></td>
<td align=”center”><a href=”javascript:auto()”><button><span class=”style3″>Auto/Stop</span></button>
</a></td>
<td align=”left”><a href=”javascript:chgImg(1)”><button><span class=”style3″>Next</span></button>
</a></td></tr>
</table>
</body>
</html>