×

Javascript Forms Validation

Form validation works at server, after client had entered all the necessary details and then pressed submit button. JavaScript provides the facility to validate the form on the client side so processing will fasterthan server-side validation. So most of developer prefer client side form validation using JavaScript.

Example

<!DOCTYPE html>  
<html>  
<head>  
<script>  
functionform_validation(){    
var name=document.myform.name.value;    
//var x = document.forms["myform"]["name"].value;  
if (name==null || name==""){    
alert("Name can't be blank");    
return false;    
}    
}  
</script>  
</head>  
<body>  
<form name="myform" method="post" action="register.php" onsubmit="return form_validation()" >  
Name: <input type="text" name="name">  
<input type="submit" value="submit">  
</form>  
</body>  
</html>
Try Now

Another Example of Form validation

<!DOCTYPE html>  
<html>  
<body>  
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">  
<table cellspacing="2" cellpadding="2" border="1">  
           <tr>  
               <td align="right">Name</td>  
               <td><input type="text" name="Name" /></td>  
           </tr>  
           <tr>  
               <td align="right">Mail id</td>  
               <td><input type="text" name="Mail id" /></td>  
           </tr>       
           <tr>  
               <td align="right">Zip Code</td>  
               <td><input type="text" name="Zip" /></td>  
           </tr>  
           <tr>  
               <td align="right">City</td>  
               <td>  
                  <select name="City">  
                     <option value="-1" selected></option>  
                     <option value="1">New Delhi</option>  
                     <option value="2">Noida</option>  
                     <option value="3">Ghaziabad</option>  
                     <option value="4">Allahabad</option>  
                     <option value="5">Lucknow</option>  
                     <option value="6">Agra</option>  
                     <option value="7">Kanpur</option>  
                     <option value="8">Gurugram</option>  
                     <option value="9">Meerut</option>  
                  </select>  
               </td>  
           </tr>  
           <tr>  
               <td align="right">State</td>  
               <td>  
                  <select name="State">  
                     <option value="-1" selected></option>  
                     <option value="1">Uttar Pradesh</option>  
                     <option value="2">Madhya Pradesh</option>  
                     <option value="3">Bihar</option>  
                     <option value="4">Assam</option>  
                      <option value="5">Uttrakhand</option>  
                     <option value="6">Jharkhand</option>  
                     <option value="7">Gujrat</option>  
                     <option value="8">Haryana</option>  
                     <option value="9">Punjab</option>  
                  </select>  
               </td>  
           </tr>  
           <tr>  
               <td align="right">Country</td>  
               <td>  
                 <select name="Country">  
                     <option value="-1" selected></option>  
                     <option value="1">USA</option>  
                     <option value="2">UK</option>  
                     <option value="3">INDIA</option>  
                   <option value="2">FRANCE</option>  
                     <option value="2">CHINA</option>  
                     <option value="2">JAPAN</option>  
                     <option value="2">RUSSIA</option>  
                  </select>  
               </td>  
           </tr>              
           <tr>  
               <td align="right"></td>  
               <td><input type="submit" value="Submit" /></td>  
           </tr>              
         </table>  
      </form>        
   </body>  
</html>

Try Now


Related Topics

Javascript Window Object

The window object represents a window in browser. An object of window is created automatically by the browser. Window is the object of browser, it is not the object of JavaScript. The...

3 minutes read.

JavaScript Time Picker Demo

Time Pickers in JavaScript are lightweight and mobile-friendly controls that let the users enter or select date and time values. These values can be from a pop-up calendar or a...

5 minutes read.

Javascript input maxlength

Various attributes often accompany the input tag in HTML to change the properties of the input field. Maxlength() is one such attribute. The maxLength attribute defines the maximum number of characters...

2 minutes read.

Javascript Example

What is JavaScript? JavaScript is a highly versatile programming language. It provides the capability to add interactivity to static web pages, which are designed with HTML and CSS. It also provides...

5 minutes read.

Javascript Operators

The concept of operators is the basis of nearly all programming languages used in today's computing systems. Operators facilitate the execution of certain functions. For instance, the (+) symbol is...

8 minutes read.

JavaScript focus on input

In JavaScript, the elements can be focused using either focus() method or onfocus() event. What is focus() method? When we want to focus on an element (if it can be focused) or...

4 minutes read.

JavaScript radio button checked value

What are radio buttons? A radio button is defined as an icon that is used to take input from the user. The user can choose only one option(value) from the group...

5 minutes read.

Javascript Redirect Button

What is a redirect button? When a button acts as a hyperlink, it is known as a redirect button. On clicking the button, it transfers the user to another page. How to...

3 minutes read.

JavaScript Function

An important part of JavaScript is the ability to create new functions within <script>.....</script> tag. To declare a function in JavaScript using function keyword. We call JavaScript function multiple times to reuse the...

3 minutes read.

Javascript Math

Math is build-in object that has properties and methods for mathematical constants and functions. It allows you to perform mathematical tasks on numbers. Syntax varpi_val = Math.PI; varsin_val = Math.sin(30); Examples Math.pow() Math.pow(x,y) returns the value of x to the power...

2 minutes read.

JavaScript Image resize before upload

Image resizing can be a quite tedious task, so it is usually done on the server-side. The resized image file is then delivered to the client side. However, sometimes the...

3 minutes read.

Design a BMI calculator using JavaScript

BMI calculator BMI stands for Body Mass Indicator. It is a numeric value which is calculated based on the height and weight of a person. It represents the fatness of the...

4 minutes read.

D3.js Tutorial

Introduction of D3.js D3.js is referred to as a JavaScript library that is used to manipulate the documents according to the data. The intensity of D3 is based on web standards...

5 minutes read.

Javascript Cookies

Cookie is a piece of data which is sent from a website and stored locally by the user's browser. Cookie is needed because HTTP is stateless protocol. Today most of...

1 minute read.

Javascript Dialog Box

A JavaScript dialog box is predefined function which is used to perform different task. Some functions are used in JavaScript Dialog box. FunctionDescriptionalert()To give alert message to userprompt()To input value from...

2 minutes read.

Array to String in JavaScript

As a web developer, you often have to deal with multiple data types in a single application. How to convert an array to a string in JavaScript is essential for...

19 minutes read.

Javascript Object

An object is an entity having state and behavior. JavaScript is an object oriented scripting language. JavaScript is template based not class based but we can create object directly. Syntax to...

2 minutes read.

JavaScript redirect URL with parameters

Data can be often passed between web pages as information in URL parameters or query strings. A URL (Uniform Resource Locator) can have a single parameter or multiple parameters.Parameters can...

4 minutes read.

Javascript Number

The Number object is a wrapper object which allows you to work with numerical values. The number object is created using the Number() constructor.It may be integer or floating-point. Syntax var n=new Number(value); Examples <!DOCTYPE html>   <html>   <body>   <script>   var x=100;//integer value   var y=100.7;//floating point value   var z=12e5;//exponent value, output: 1200000   var n=new Number(20);//integer value by number object     document.write(x+" "+y+" "+z+" "+n);   </script>   </body>   </html> Try Now Output 100 100.7 1200000 20 Description The primary...

1 minute read.

Javascript Email Validation

We can validate the email with the help of JavaScript. Here we check the condition related to any email id, like email it must have "@" and "." sign and...

2 minutes read.