Skip to content
Advertisement

Set validation action for required fields in html-form

What I try to achieve

I try to create a form with required fields. If the user submits the form without filling out all submitted fields, the field-border should become red and the standard message “Please fill out this field” shouldn’t appear.

The following form is a minimal working example:

JavaScript

What I’ve tried

I’ve tried to set the custom validation message to an empty string:

JavaScript

This does not work (in firefox and in chrome).


I’ve also read somewhere (unfortunately I can’t find the link anymore) that I have to set it to just one space:

JavaScript

This does work with chrome, but unfortunately it doesn’t work with firefox (the message-box still appears with one space in it).


I’ve finally tried to just prevent the default:

JavaScript

This doesn’t work with firefox and chrome.

Question

Is it possible to prevent the appearance of the message-error entirely for all browsers?

Advertisement

Answer

Although the answer by Raul Marquez is working, I want to share my own solution:

JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement