DEV Community

Discussion on: Form validation using javascript

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Please don't ever just remove the focus styles from form elements like this:

.input-control input:focus {
    outline: 0;
}
Enter fullscreen mode Exit fullscreen mode

Some people rely on the visual indicator of focused elements, especially those who use a keyboard to navigate the form.

One thing I noticed in your HTML is that you're not using the native form element types where they exist. For example, the email field should be of type email. Not only does this present the user with an appropriate keyboard (device dependent) but you can hook into the default validation provided by the browser, and then remove the regular expression checking from the code.

In-fact, by using the HTML form validation attributes (type="", required, pattern, etc), you can make your Javascript validation far more generic. That way, you can target all input elements as you need, and the validation will still work across the entire form regardless of whatever form elements are added or removed in the future.