Enable HTML 5 form validation but disable the 'standard' error message

Question

Recently I have created a form with client-side validation and server-side validation. The client-side validation is being done by the HTML 5 validation (email, password, required, pattern, etc.).

Though, for the client side validation I want to USE the HTML 5 validation but disable the 'standard' markup of the error message, for example the bubble of google chrome with the yellow exclamation mark. Instead I want to use my own CSS error markup so I can style the client-side error message the same as the server-side error message.

The question is if there is a way to achieve this? No validation for the form removes the error message but sadly also removes the validation... Other solutions are welcome as well of course!

Thx in advance!

Answer 1

HTML5 form validation messages are (currently) outside the scope of CSS.

To use custom error messages, you must use JavaScript to validate form entries instead. If you're already using jQuery, there are several good plugins for form validation.