Header ads

HTML Form Validation Using JavaScript

 

HTML Form Validation Using JavaScript







A web form or HTML form on a page permits a user to enter data that is sent to a server for processing. Forms can look like paper or database forms since web users fill-up the forms using check boxes, radio button or text fields.

Syntax of the Simple HTML form:

<!DOCTYPE html>

<html>

<head>

            <title> Simple Form</title>

</head>

<body>

<h1>Simple form Using HTML & CSS </h1>

            <form name=”myform” method=”post” onSubmit=”return validate()”>

                        <table align=”center” cellpadding=”10″>

            <!——— First Name ——>

                        <tr>

                                    <td> First Name </td>

                                    <td> <input type=”text” name=”fname” maxlength=”30″/></td>

                                    </tr>

<!——— Last Name ——>

            <tr>

                        <td> Last Name </td>

                        <td> <input type=”text” name=”lname” maxlength=”30″/></td>

            </tr>             

<!———DOB ——>

<tr>

                        <td> Date of Birth </td>

                        <td> <input type=”date” name=”date” id=”date” min=”1981-01-01″/></td>

            </tr>                                     

<!——— Email ID ——>

            <tr>

                        <td> Email ID </td>

                        <td> <input type=”text” name=”email” maxlength=”100″/></td>

            </tr>

<!——— Phone no.——>

            <tr>

                        <td> Phone </td>

                        <td> <input type=”text” name=”phone”/>    </td>

            </tr> 

<!——— Gender radio button——>

            <tr>

                        <td> Gender </td>

                        <td> Male <input type=”radio” name=”gender” value=”male”/>

                                    Female <input type=”radio” name=”gender” value=”female”/></td>

                        </tr>

<!——— Address ——>

            <tr>

                        <td>Address</td>

                        <td><textarea name=”address” placeholder=”Enter Address” cols=”50″></textarea></td>

            </tr>             

<!——— State select tag——>

            <tr>

                        <td>State</td>

                        <td>

<select id=”state” name=”state”>

                        <option value=”Select a state”>Select a state</option>

                        <option value=”assam”>Assam</option>

                        <option value=”manipur”>Manipur</option>

                        <option value=”delhi”>Delhi</option>

                        <option value=”kolkata”>Kolkata</option>

                        </select>

                        </td>

            </tr>

<!——— Country——>

<tr>

                        <td> COuntry</td>

                        <td> <input type=”text” value=”India” name=”country” readonly=”readonly”/></td>

            </tr>

<!——— Hobbies checkbox——>

            <tr>

                        <td>Hobbies </td>

                        <td> Drawing : <input type=”checkbox” name=”hobby”  id=”hobby” value=”draw”/>

                                    Playing : <input type=”checkbox” name=”hobby” id=”hobby” value=”play”/>

                                    Swimming : <input type=”checkbox” name=”hobby” id=”hobby” value=”swim”/>

                                    travelling: <input type=”checkbox” name=”hobby” id=”hobby” value=”travel”/>

                        </td>

</tr>

<!—- Submit——->

<tr>

                        <td colspan=”2″ align=”center”>

                        <input type=”submit” name=”submit” value=”Submit”/>

                        </td>

            </tr>

</table>

</form>

</body>

</html>

CSS:

<style>

Body

{  

background-color: #f0fff0;

font-family: Calibri;

}

h1 {

font-weight:bold;

color: #4682B4;

text-align: center;

}

table {

color: white;

font-size: 15px;

font-weight: bold;

background-color: #696969;

border-collapse: collapse;

border: 2px solid navy;

  }</style>


Validating a Form: The information went into a form should be the right format and certain fields need to be filled in order to successfully utilize the submitted form. Username, password, contact data are a few subtleties that are mandatory in the form and consequently should be given by the user. For validating the form normally JavaScript is used.

JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.

Form validation:

<script type=”text/javascript”>

function validate()

{

            var first= document.forms[“myform”][“fname”].value;

            var last= document.forms[“myform”][“lname”].value;

var date= document.forms[“myform”][“date”].value;

            var email= document.forms[“myform”][“email”].value;

            var phone= document.forms[“myform”][“phone”].value;

            var gender= document.forms[“myform”][“gender”].value;

            var address = document.forms[“myform”][“address”].value;

            var state= document.forms[“myform”][“state”].value;

            var hobby= document.getElementById(“hobby”);

// first name validation

if(first == “”)

            {

alert(“enter the name”);

            return false;

            }

if(!isNaN(first))

            {

            alert(“name should be in character”);

            return false;

            }

//last name validation

if(last == “”)

            {

            alert(“enter the last name”);

            return false;  }

if(!isNaN(last))

            {

            alert(“name should be in character”);

            return false;

            }

// DOB validation

if(date == “”)

            {

            alert(“enter date”);

            return false;

            }

// email validation

var at = email.indexOf(“@”);

var dot = email.lastIndexOf(“.”);

if(at<1||dot<at+2||dot+2 >= email.lenght)

            {

            alert(“Not a valid email”);

            return false;

            }

//phone no. validation

if(phone == “”)

            {

alert(“enter phone no.”);

return false;}

if(isNaN(phone))

            {

            alert(“phone no. should be in digit.”);

            return false;

            }

if( phone.length != 10)

{

            alert(“must be 10 digit no.”);

            return false;

            }

//gender radio validation

if(gender==””)

{

alert(“seelct a gender”);

return false;

}

// address validation

if(address == “”)

            {

            alert(“Enter Address”);

            return false;

            }

// state validation

if(state==”Select a state”)

            {

            alert(“select a state”);

            return false;

            }

// hobbies validation

if(!hobby.checked)

            {

            alert(“select a hobby”);

            return false;

            }

} </script>



Visit the YouTube Channel – Techno Junkie







Post a Comment

0 Comments