Form Validation

JavaScript Forms

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

JavaScript Can Validate Numeric Input

JavaScript is often used to validate numeric input:

Please input a number between 1 and 10

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

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 HTMLInput Attributes
• Constraint validation CSS Pseudo Selectors
• Constraint validation DOM Properties and Methods

Constraint Validation HTML Input 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
type	Specifies the type of an input element

Constraint Validation CSS Pseudo Selectors

Selector	Description
: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

Источник

Basic Form Validation in JavaScript

In the past, form validation would occur on the server, after a person had already entered in all of their information and pressed the submit button.

If the information was incorrect or missing, the server would have to send everything back with a message telling the person to correct the form before submitting it again.

This was a lengthy process and would put a lot of the burden on the server.

These days, JavaScript provides a number of ways to validate a form’s data right in the browser before sending it to the server.

Here’s the HTML code we’ll use in the following examples:

      
 
 
Username
 
 
 
Email Address
 
 
 
 
 
 
  

Basic Validation

This type of validation involves checking all the mandatory fields and making sure they’re properly filled in.

Here’s a basic example of a function validate that shows an alert if the username and email address inputs are blank, otherwise it returns true:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => < e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") < alert("Please enter your username."); username.focus(); return false; >if (emailAddress.value === "") < alert("Please enter your email address."); emailAddress.focus(); return false; >return true; > submitBtn.addEventListener('click', validate); 

But what if someone enters in random text as their email address? Currently the validate function will still return true. As you can imagine, sending bad data to the server can lead to problems.

That’s where data format validation comes in.

Data Format Validation

This type of validation actually looks at the values in the form and verifies that they are correct.

Validating email addresses is notoriously difficult – there are a vast number of legitimate email addresses and hosts, and it’s impossible to guess all the valid combinations of characters.

That said, there are a few key factors that are common in all valid email addresses:

• An address must contain one @ and at least one dot (.) character
• The @ character cannot be the first character in the address
• The . must come at least one character after the @ character

With this in mind, maybe developers use regex to determine if an email address is valid or not. Here’s a function that Tyler McGinnis recommends on his blog:

const emailIsValid = email => < return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); >emailIsValid('free@code@camp.org') // false emailIsValid('quincy@freecodecamp.org') // true

Added to the code from the last example, it will look like this:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => < e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") < alert("Please enter your username."); username.focus(); return false; >if (emailAddress.value === "") < alert("Please enter your email address."); emailAddress.focus(); return false; >if (!emailIsValid(emailAddress.value)) < alert("Please enter a valid email address."); emailAddress.focus(); return false; >return true; // Can submit the form data to the server > const emailIsValid = email => < return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); >submitBtn.addEventListener('click', validate); 

HTML5 Form Constraints

Some of commonly used HTML5 constraints for are the type attribute (e.g. type=»password» ), maxlength , required and disabled .

A less commonly used constraint is the pattern attribute that takes a JavaScript regular expression.

More Information

Источник