Simple validation with attribute pattern in HTML

Question

I do not really mastered this, but i want to validation checks form HTML attribute, that is "pattern", this example my own:

<input type='text' pattern='[-+]?[0-9]*[.,]?[0-9]+' />

This validates only one number. How can I validate a comma-separated list of numbers?

What is the requirement here? Please provide input strings you want to match and those you do not want to match. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 29, 2017 at 13:49
what? i want to create HTML validation for my <input> tag, using by pattern. in some tag i want to using ONLY Commas and Number, just that.., i dont understand you problem @WiktorStribiżew — Abdul Aziz Al Basyir
– Abdul Aziz Al Basyir, Commented Mar 29, 2017 at 14:20
See my explanations. No need to be excited about it that much, it is just a regex. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 29, 2017 at 15:17

Wiktor Stribiżew · Accepted Answer · 2017-03-29 15:17:28Z

1

You seem to want to validate a string of comma-separated numbers that meet your pattern.

Use

pattern="[-+]?[0-9]*[.,]?[0-9]+(?:,[-+]?[0-9]*[.,]?[0-9]+)*"

The pattern is anchored by default, so no need using ^ at the start and $ at the end.

Details:

[-+]? - an optional - or +
[0-9]* - 0+ digits
[.,]? - an optional . or ,
[0-9]+ - 1+ digits
(?:,[-+]?[0-9]*[.,]?[0-9]+)* - zero or more sequences of:
- , - a comma
- [-+]?[0-9]*[.,]?[0-9]+ - the number pattern (described above).

See a demo below:

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="[-+]?[0-9]*[.,]?[0-9]+(?:,[-+]?[0-9]*[.,]?[0-9]+)*" title=""/>
 <input type="Submit"/> 
</form>

answered Mar 29, 2017 at 15:17

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

1 Answer 1