Skip to content 
Form Validation in JavaScript: How to Protect Your Apps From Bad Data
Protecting your application from incorrect data prior to reaching the server is called learning JavaScript form validation. Any form that allows anything to be entered is a form that will fail.
You may have completed a form that stated “Email is required” or “Password must be at least 8 characters.” That fast feedback, without needing to reload the page, is what you’re calling JavaScript form validation. JavaScript form validation prevents errors while the user is still on the page and saves time and frustration.
If you are relatively new to JavaScript form validation, you may believe that it is simply checking if a field is blank. However, there’s so much more to real-time validation than just this. In addition to checking for formats, comparing passwords, enforcing constraints and providing friendly error messages, we’ll take a closer look at five key concepts that will help you create dependable and user friendly forms.
1. Checking for Required Fields: The Basic Component of JavaScript Form Validation
The very first part of the process of creating JavaScript form validation is verifying that required fields are populated. Before you even consider checking whether an email address matches a certain format or if a password meets a minimum length requirement, you should verify that the user entered information into the required field(s).
To obtain the contents of a form field value, you can utilize the value property. To determine if a text field is empty, you would see if input.value is an empty string. Selects and checkbox fields are evaluated differently. With selects, you evaluate the value of select.value. Checkbox fields are evaluated based upon the state of their checked properties.
In order to provide an error message near the empty field or within a summary area, you should prevent submission of the form and indicate why the field cannot be submitted. Within the submit event listener, you can utilize event.preventDefault() to halt submission. Afterward, display an error message next to or above the empty field.
While it is rare that a user will intentionally leave a field empty, JavaScript form validation can perform many additional checks.
2. Using Regular Expressions to Validate Formats
Once you have verified that a field does not contain any empty strings, you need to verify that the contents of the field contains the proper format. There are numerous formats for different types of fields such as email addresses, phone numbers, zip codes and dates. At this point, regular expressions come into play.
Regular expressions are a type of pattern used to describe a string. An example of a simple email address regex is one that verifies if a string contains something like “something@domain.com”. Once you have defined a regex, you can verify if a string conforms to that pattern utilizing the test method. If test returns True, then the format was valid. If False, then it was invalid.
An example of using JavaScript form validation to validate an email field would include validating that a string contains an @ symbol and another @ symbol after it. Phone number fields may allow digits, spaces, hyphens and parentheses. Zip code fields may be limited to either 5 digits or 5 digits followed by a hyphen and four more.
Be careful not to define too restrictive of a regex. A completely valid email like “my.name+tag@example.co.uk” may be rejected by an overly simplistic regex. Utilize tested patterns from trusted sources.
When the format is invalid, provide a specific error message similar to “Please enter a valid email address.” This will enable the user to correct his mistake without attempting to guess what went wrong.
3. Validating Password Strength and Confirmation
JavaScript form validation for password-related validations is much more complex than validating email fields. Typically you need to apply strength guidelines (such as minimum character length or mixing upper/lowercase letters, numbers &/or special characters) and confirm that the password and confirmation password match.
Begin with checking length. Many sites require at least eight (8) characters. Next check for upper-case letters, lower-case letters, numbers &/or special characters. Each requirement met increases the overall password strength.
For confirmation purposes simply compare the value of the password field to the confirmation field. If they don’t match, provide an error message similar to “Passwords do not match.”
Immediate feedback is particularly important here. While typing, you can provide feedback by updating a strength meter or listing off criteria that were met. You turn JavaScript form validation into a positive experience rather than a roadblock.
Remember – Don’t store passwords in plain text anywhere – On the server side validation is necessary regardless of whether or not you utilized JavaScript form validation.
4. Providing Immediate Feedback
Another way in which JavaScript form validation improves usability is allowing you to immediately validate fields as the user enters information versus waiting until he submits the form. This provides quicker feedback and less frustration.
You can add an input or change event listener to each field. Immediately after the user begins entering information into a field, you validate that individual field and update an error message adjacent to it. Green borders, checkmarks or clearing error messages give the user an indication that he/she is doing things correctly.
Immediate feedback should always be lenient. Never display an error while a field remains empty unless the user attempted to submit. A common approach is to begin validating after the field has been interacted with (i.e., focus and blur) or after some reasonable delay.
When displaying error messages keep them directly associated with the corresponding field(s). Provide friendly messages instead of generic ones like “Invalid Input.” Display a message similar to “Please enter a valid email address such as ‘name@address.com’.” Users will find it easier to correct mistakes quickly.
Additionally, utilize CSS to draw attention to the invalid field(s). A red border around an invalid field or a faint background with an icon are good ways to visually separate invalid fields. Although color draws the eye, provide text-based messages for accessibility.
5. Creating Your Own Validation Constraints And Disabling The Submit Button
There will be times when your JavaScript form validation requirements exceed those provided by standard validation methods. You may need to verify whether a given username is available (by querying your server via an AJAX request), whether a date selected falls within a predetermined range, etc.
Even though you’ve identified custom rules you still attach a submit event listener to your form element. Upon receiving the submit event listener event, execute your various validation logic tests. If any of your tests failed, invoke event.preventDefault() in order to cancel submission of your form and produce the applicable error message.
If you wish to query your server asynchronously during your custom validations (as would be the case when determining availability of a given username) you will need to manage promises. Produce some sort of loading indicator while waiting for your asynchronous responses and then continue or cancel submission based upon your response. More advanced in nature however becoming increasingly necessary in today’s web applications.
You can also remove interaction capabilities from your submit buttons while performing your validations (to avoid double submissions) and re-enable once validations have concluded or once your server responded.
After successfully completing all validations and obtaining approval from your server-side validation mechanisms (if present), your form can now proceed with normal submission processes. Your application will receive this data in order to complete any remaining processing and server side validation checks. Remember that client side JavaScript form validation exists solely for convenience – Server side validation will always be required for security reasons.
Combining These Five Techniques Into One Complete Toolkit
Using these five techniques (required fields verification, format verification/validation, password verifications/validation, real time error reporting/validation and custom validations) you now possess everything needed to develop forms that are reliable and user-friendly.
Firstly, begin implementing required field verifications onto your forms. Then implement email and phone verifications along with password confirmation and password strength reporting functionality. Introduce real-time error messaging functionality and lastly introduce custom async verifiers for unique items such as usernames etc…
As you gain more experience with JavaScript form validations the process becomes second nature. Rather than being concerned with how to accomplish the task you’ll begin focusing on enhancing the end user experience.
Quick Reference Guide For Essential JavaScript Form Validation Techniques
Below is a rapid reference guide that will assist your continued development with respect to JavaScript form validations:
- Always verify that required fields are populated prior to evaluating any other data within the form.
- Check for empty strings in text fields. Checkboxes should be considered unchecked if they are not checked.
- Utilize regular expressions for format evaluations. Be cautious when testing common format patterns such as emails, phones, zipcodes and dates.
- Verify if two fields match (passwords).
- Display real-time feedback. Attach an input event listener to each field and report any violations as soon as possible after changes are detected.
- Position your error messages directly adjacent to related fields. Use clear descriptive language in all error messages.
- Prevent default behavior from occurring within submit handlers if any of the validation steps fail. Do not send any data back to the server until corrections are made.
- Do not rely solely on client-side validation. Perform all validation on both ends.
- Test edge conditions within your validation steps including blank strings, strange formats & excessive lengths.
Additional references for further study: MDN Documentation on Form Data Validation & JavaScript.info documentation on Form Validation
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS
[INSERT_ELEMENTOR id=”122″]
