CODEWITHSUNDEEP
javascriptjqueryhtml
Spring
Spring

Reputation: 11865

HTML set custom validation error message

I want to validate my input field if its a digit or not

<input...type="number" step="1"...>

This works well, but form gives the warning that input is not a valid number, while I want to show something like "Only digits allowed"

Can I customize the message? the style should be same like my other validation messages, not a different pop up or something

Upvotes: 0

Views: 105

Answers (1)

Alex W
Alex W

Reputation: 38253

As it stands currently, the only way to do it consistently is through JavaScript, by using the setCustomValidity() function:

<input...type="number" step="1" oninvalid="setCustomValidity('Only digits allowed')" oninput="setCustomValidity('')" />

Some browsers have implemented their own custom attributes, but they aren't reliable yet.

jsFiddle

HTML5Rocks has done an in-depth analysis of the browser support and pitfalls for this functionality.

Upvotes: 1

Related Questions