Although there are a few Java Script based solutions, none of them are a fit in to what we needed.
Also, developing on the top of someone else’s solution can easily turn into a painful job.
Ideally, users fill in the form with necessary information and finish the job successfully. These requirements turned into the main characteristics of this solution: element (type=email, number, …), we also have constraint validation (required, maxlength, …) to ease the work of checking the form content on the client side.
Constraint validation is an algorithm browsers run natively when a form is submitted to determine its validity.
Bad information leads to bad user interactions, bad analytics and bad sales. Email addresses should always have the same structure: [email protected] . An email form field should check if the user has entered an email address correctly.
An email address has some text, followed by the @ symbol, then a domain name, a dot (.) and finally an extension. An age-old question is “where do we check for valid input: server-side or client-side?
These allow us to easily have valid/invalid fields changing its appearance, helping the user identify the errors and correct them right away.
By default, the browser does not apply a style to these pseudo-classes, so we can define our own.
There are 3 possible states: Custom validations allow us to apply a specific rule to a given input field.
However, we also depend on the form and fields state in order to provide feedback to the user.
For example, we don’t want to show the “required” errors if the user didn’t interact with the form yet.
We also recommend you to use a Java Script library to extend and enhance the default form validation functionalities for better user experiences on modern web design.
In this post, you’ll find a list of 7 best and most downloaded Java Script Form Validation libraries (without any 3rd dependencies such as j Query) to validate your HTML form with custom error messages, CSS styles, validation rules and more. Demo Download Just-validate is a dependency-free, HTML5 data attribute based form validation that supports both client side and server side form validation.