JavaScript Forms
HTML form validation can be done by JavaScript.
If a form field [fname] is empty, this function alerts a message, and returns false, to prevent the form from being submitted:
JavaScript Example
function validateForm[] {
let x = document.forms["myForm"]["fname"].value;
if [x == ""] {
alert["Name must be filled out"];
return false;
}
}
The function can be called when the form is submitted:
HTML Form Example
Name:
Try it Yourself »
JavaScript Can Validate Numeric Input
JavaScript is often used to validate numeric input:
Automatic HTML Form Validation
HTML form validation can be performed automatically by the browser:
If a form field [fname] is empty, the required
attribute prevents this form from being submitted:
HTML Form Example
Try it Yourself »
Automatic HTML form validation does not work in Internet Explorer 9 or earlier.
Data Validation
Data validation is the process of ensuring that user input is clean, correct, and useful.
Typical validation tasks are:
- has the user filled in all required fields?
- has the user entered a valid date?
- has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many different ways.
Server side validation is performed by a web server, after input has been sent to the server.
Client side validation is performed by a web browser, before input is sent to a web server.
HTML Constraint Validation
HTML5 introduced a new HTML validation concept called constraint validation.
HTML constraint validation is based on:
- Constraint validation HTML Input Attributes
- Constraint validation CSS Pseudo Selectors
- Constraint validation DOM Properties and Methods
Constraint Validation HTML Input Attributes
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 |
type | Specifies the type of an input element |
For a full list, go to HTML Input Attributes.
Constraint Validation CSS Pseudo Selectors
:disabled | Selects input elements with the "disabled" attribute specified |
:invalid | Selects input elements with invalid values |
:optional | Selects input elements with no "required" attribute specified |
:required | Selects input elements with the "required" attribute specified |
:valid | Selects input elements with valid values |
For a full list, go to CSS Pseudo Classes.
Report Me About:
Unused variables
Undefined variables
Warn Me:
About == null
About debugging code
About unsafe for..in
About arguments.caller and .callee
About assignments if/for/...
About functions inside loops
About eval
About unsafe line breaks
About potential typos in logical operators
When code is not in strict mode
When new is used for side-effects
Assume I'm Using:
Browser
NodeJS
jQuery
Development [console, etc.]
New JavaScript features [ES6]
Mozilla JavaScript extensions
Older environments [ES3]
- JavaScript form validation
- Example of JavaScript validation
- JavaScript email validation
It is important to validate the form submitted by the user because it can have inappropriate values. So, validation is must to authenticate user.
JavaScript provides facility to validate the form on the client-side so data processing will be faster than server-side validation. Most of the web developers prefer JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile numbers and more fields.
JavaScript Form Validation Example
In this example, we are going to validate the name and password. The name can’t be empty and password can’t be less than 6 characters long.
Here, we are validating the form on form submit. The user will not be forwarded to the next page until given values are correct.
Test it NowJavaScript Retype Password Validation
Test it NowJavaScript Number Validation
Let's validate the textfield for numeric value only. Here, we are using isNaN[] function.
Test it NowJavaScript validation with image
Let’s see an interactive JavaScript form validation example that displays correct and incorrect image if input is correct or incorrect.
Test it NowOutput:
JavaScript email validation
We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate the email id such as:
- email id must contain the @ and . character
- There must be at least one character before and after the @.
- There must be at least two characters after . [dot].
Let's see the simple example to validate the email field.
Test it Now