It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Learn About JavaScript Form Easily With Real Examples

Reading time 3 min
Published Aug 8, 2017
Updated Oct 15, 2019

A JavaScript form is a handy feature related to security and user engagement. It allows you to collect user input. Even though the form itself is created in HTML, you can use JavaScript to validate the inputted data.

In this tutorial, you will learn all about using HTML attributes and pseudo selectors to validate the user inputted data. If afterwards you want to increase validation requirements, check out JavaScript validation API tutorial for more options or learn how to create your own validation patterns.

JavaScript Form: Main Tips

  • Forms help to submit user inputted information.
  • Main form function is to validate data.
  • HTML form validation can be done by using JavaScript.
  • HTML form validation does not work in Internet Explorer 9 or earlier.
  • Using an atrribute called form action JavaScript coder can specify where to send the data from a submited form.

HTML Form Validation

HTML form validation can be performed by the browser. If the required attribute is set, and the element is empty, the JavaScript form won't be submitted.

This example displays one of the validation functions. It sets the input field name to be required:

Example
<form action="/action.php" method="post">
<input type="text" name="firstName" required> 
<input type="submit" value="Submit"> 
</form>

Data Validation

Data validation means checking if the input data is correct and clean. Its steps include checking if all the required fields are filled, making sure the user inputted valid data, and checking if the numeric field contains only numbers. The purpose of validation is to make sure a program gets the correct information after the developer makes JavaScript get form data.

There are three different ways to validate data before JavaScript form submission:

  • Client side validation occurs on the web browser before sending the data to the server.
  • Server side validation happens on the server after it receives sent data.
  • Constraint validation is a new validation concept based on CSS Pseudo Selectors, HTML Input Attributes, DOM methods and properties.

Constraint Validation

When form validation caused enough headaches, JavaScript constraint validation was offered as a solution. Basically, it is a native validation tool. Using special attributes and selectors, the browser runs an algorithm to perform the task.

While it's easy to use, you should be familiar with said attributes and selectors to understand what each of them represents and does. See the tables below, and memorize them to make your work way more manageable.

HTML Input Attributes

Attribute Description
disabled Defines the element to be disabled
max Defines element's maximum value length
min Defines element's minimum value length
pattern Defines a value's pattern for an element
required Defines an element to be required
type Defines element's type

Pseudo Selectors

Selector Description
:disabled Selects all elements with the disabled attribute
:invalid Selects all elements with invalid values
:optional Selects all elements without the required attribute
:required Selects all elements with the required attribute
:valid Selects all elements with valid values

JavaScript Form: Summary

  • A JavaScript form submit allows to send user inputted data.
  • By executing form action JavaScript developer can choose where the data from a certain submitter form will go.
  • You can validate the data before you make JavaScript get form data.
  • You can also use regex for validation before JavaScript form submit.