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.
Contents
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:
<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.