JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Form Validation

HTML form validation can be done by JavaScript.

Below is a simple example of HTML form validation:

Create an account

Already have an account? Login
Run code

HTML form is often used to collect user's information such as name, email address, location, age, and so on.

But it is quite possible that some user might not enter the data what you've expected.

To avoid unnecessary strain on your server resources you can validate the form data on client-side (user's system) using JavaScript.

Client side validation is performed by a web browser, before input is sent to a web server.

Server side validation is performed by a web server, after input has been sent to the server.

Typical validation tasks are:

  • has the user filled in all required fields?
  • has the user entered a valid data?

In this code if the input field (username) is empty, this function alerts a message, and returns false, to prevent the form from being submitted:

JavaScript Example:

The function can be invoked when the form is submitted:

HTML Form Example:
Run code

Validate Numeric Input

JavaScript is often used to validate numeric input.

Please input a number between 1 and 10:

Run code

Validate Email Input

JavaScript is often used to validate email address.

Please input a valid email address:

Run code

Validate Password Confirmation

JavaScript is often used to match password confirmation.

Run code

Automatic HTML Form Validation

HTML form validation can be performed automatically using required attribute:

Run code

Change Input type

You can toggle between <input type="password"> and <input type="text"> using javascript.

Enter a value in the password field and click the "Show password" button:

Run code

HTML Input Validation Attributes

HTML5 introduced following new HTML attributes:

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires an element

CSS Validation Pseudo Selectors

CSS3 introduced following new CSS Pseudo Selectors:

Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:valid Selects input elements with valid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified

Note: Client-side validation is not a substitute or alternative for server-side validation. You should always validate form data on the server-side even if they are already validated on the client-side, because user can disable JavaScript in their browser.