JavaScript - DOM Forms

The DOM Forms

The HTML DOM documentformsare used to get the data from the users.

In JavaScript, you can use the’forms’ collectionof the ‘document’ object to access all <form> elements of the HTML document.

You can access all forms elements of particular forms and manipulate them. Using JavaScript, you can validate the form values, handle the form data submission, etc.

Syntax

Follow the syntax below to use the ‘forms’ collection to manipulate the forms of the DOM.

document.forms;

Here, ‘forms’ is a property of the ‘document’ object.

Properties of ‘forms’ Collection

PropertyDescriptionlengthIt represents the number of <form> elements in the HTML document.

Methods of ‘forms’ Collection

MethodDescription[index]To get the particular <form> element from the 0-based index of the collection of HTML forms.item(index)To get the particular <form> element from the 0-based index of the collection of HTML forms.namedItem(id)To get the <form> element with a particular id.

Return value

The document.forms returns the collection of all forms in the same order as they are present in the HTML document.

Example: Finding total <form> elements in the HTML document)

In the below code, we use the ‘length’ property of the ‘forms’ collection to find the number of existing forms in the HTML document.

Example: Get the id of all <form> elements

In the below code, we access each form using its index and use the ‘id’ property to get the id of a particular form.

Example: Get particular form using its id and namedItem() method

In the code below, we used the namedItem() method by taking the ‘forms’ collection as a reference to get a form with a particular id.

JavaScript Form Submission

In JavaScript, you can submit the form using the ‘submit’ input type and execute a particular function to handle the form data using the onsubmit() event handler.

Example

In the below code, the form takes users’ first and last names. After that, when users click the submit input, it calls the submitForm() function.

In the submitForm() function, we used the preventDefault() method to prevent the execution of the function without submitting the form.

After that, we use the ‘forms’ collection to access the form and values of its input fields.

At last, we print the input values in the output.

JavaScript Form Validation

In JavaScript, you can also validate the form to ensure the users have filled the required inputs. You can perform the validation check in the function that you are invoking on form submit.

Furthermore, you may also show the error message in the output if the form is not fulfilling the particular condition.

Example

In the below code, we check whether the length of the first name and last name is less than 3 when users submit the form. If the length of firstname or lastname is less than 3, we show the error message.

JavaScript Form Data Validation

It is also required to validate the input data.

Sometimes, it happens that you want users to pass the numeric data, but they pass the string data by mistake. In such cases, developers are required to validate the data and show the error message.

You may validate the data on the client side or server side. It is a best practice to validate the data on the client side and send pure data to the server.

Example

In the code below, we have created the input field to take emails from users. When users submit the form, we use the regex and test() method to check whether they have passed the valid email address in the input.

Form Validation Using the HTML Constraint

(Automatic form validation)

In HTML5, some constraints are introduced to validate the form. You can use these constraints as an attribute of the HTML element, and it prevents the form submission if the input doesn’t match the constraints.

The table below contains the constraints and their description.

ConstraintDescriptiondisabledTo disable the input element.maxTo specify the maximum value of the input element.minTo specify the minimum value of the input element.patternTo specify the particular pattern for the input element.requiredTo specify the input element as a required field.typeTo specify the type of the input element.

Syntax

Follow the syntax below to add the above constraints as an attribute to the <input> element.

<input attr=value >

Example: Using the required attribute

In the below code, we used the ‘required’ attribute with the input element. When you submit the form without entering the number in the input field, it will show a default error message.

The HTML form validation constraints provide limited functionality. So, you can write a custom JavaScript function to validate the form.

You may also use the CSS selectors to validate the form.