how to get rid of HTML 5 validation message with our own custom validation message

Question

I am trying to validate required fields of form in HTML 5 with custom messages that are shown like a tooltip text near the field. Here is the HTML code that I am trying for this purpose:

<form method="post" action="" id="validation">
  Name:<input type="text" id="nome"  name="nome" required="required" oninvalid="this.setCustomValidity('Name is required field')" oninput="setCustomValidity('')" /><br />
  <br />
  <br />
  <input type="submit" value="Enviar" />
</form>

Above code is working fine in google chrome except in mozilla in following case:

• press submit button, it will give validation message "Name is required field"

• fill something and then before pressing submit type backspace key on keyboard to erase name completely. When it is completely erased it shows message "Please fill out this field" on its own.Whereas it should again display a message "Name is required field" or display just nothing.

Can some one test and provide an alternative solution for doing this in Mozilla.

Answer 1

If it is just the one field, then you could always just check for that event on the oninput:

oninput="if(this.value==''){this.setCustomValidity('Name is required field')} else {this.setCustomValidity('')};"

http://jsfiddle.net/j1c935ex/2/

For tidier code, you'd be better calling a function, especially if you are doing this on several fields.

Answer 2

You can add a "novalidate" attribute to the form element to disable html5 build-in validation, and then handle all the validation by javascript yourself.