HTML5 Input Validation with Custom Message

Question

I'm trying to validate two input boxes and display a custom error message using HTML5 browser validation.

First input should be at least 3 characters, no custom error.
Second input should be at least 4 characters, with custom error.

The validation doesn't seem to work with my second input, I'm always prompted with my custom error message. When I remove the oninvalid it works.

Where am I going wrong?

My HTML is below;

<form>
  <input type="text" placeholder="min 3" pattern=".{3,}">
  <input type="text" placeholder="min 4" oninvalid="this.setCustomValidity('Must be 4 Characters')" pattern=".{4,}">
  <input type="submit" value="Check"></input>
</form>

I'm sure it's something obvious.. any help is appreciated.

Here's a fiddle.

lealceldeiro · Accepted Answer · 2019-10-21 08:37:33Z

12

You could use the oninput attribute to restore the validity of the form like this: oninput="setCustomValidity('')".

This has a side effect and it is that if you type an invalid input and submit the form and type again another invalid value immediately the default message is shown instead of the custom one until you click again the submit option.

(See this forked jsfiddle, or below working snippet)

<form>
  <input type="text" pattern=".{3,}" placeholder="min 3">
  <input type="text" placeholder="min 4" pattern=".{4,}" oninvalid="setCustomValidity('Must be 4 Characters')" oninput="setCustomValidity('')">
  <input type="submit" value="Check" />
</form>

Another option would be adding an inline text with title attribute. The text will be appended after the default error message (See below snippet)

<form>
  <input type="text" pattern=".{3,}" placeholder="min 3">
  <input type="text" placeholder="min 4" pattern=".{4,}" title="Must be 4 Characters">
  <input type="submit" value="Check" />
</form>

edited Oct 21, 2019 at 8:37

answered Aug 3, 2018 at 15:13

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DWB Over a year ago

The inputs need the attribute required to be considered for validation on submit. As was, all the inputs were css input:valid, and the forms could be submitted with two empty string values, regardless of any pattern specified.

Collectives™ on Stack Overflow

HTML5 Input Validation with Custom Message

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related