HTML text input RegEx validation not working even with required attribute

Question

I am trying to have my dynamically generated text inputs only allow for digits and an optional decimal point in between. I am using the attribute but the inputs are still unresponsive to the RegEx.

var howMuch = $("<input>").attr("type", "text").attr("name", "howMuch").attr("pattern", "([0-9]+(\.[0-9]+)?)").prop("required", true);

The HTML generates like so: HTML

PLEASE do not mark this question as duplicate, none of the existing similar answers are already using the 'required' attribute

Should be "([0-9]+(\\.[0-9]+)?)" to account for string metacharacter interpretation. "([0-9]+(\.[0-9]+)?)" is exactly the same as "([0-9]+(.[0-9]+)?)". — Pointy
– Pointy, Commented Aug 20, 2018 at 14:51
Neither of those expressions solved my issue. Alphabetical inputs are still being added. — user9856145
– user9856145, Commented Aug 20, 2018 at 14:55

lviggiani · Accepted Answer · 2018-08-20 15:02:18Z

1

Pointy answer applies. Also, pattern attributes only works at form validation time. In other words, user is able to type in whatever he wants. Only when he presses submit, pattern attribute is taken into consideration. If you want a realtime feedback to user you should listen to change events and manually trigger the form validate method. Or you can use the keydown event to prevent some characters to be accepted as input.

answered Aug 20, 2018 at 15:02

lviggiani

6,16812 gold badges61 silver badges95 bronze badges

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

1 Comment

user9856145 Over a year ago

Think I'm going to use keydown. Thank you for your answer!

Collectives™ on Stack Overflow

HTML text input RegEx validation not working even with required attribute

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