Combining two regex in input restriction "pattern"

Question

I need to have an input field where the user can only enter 7 numbers, nothing more, nothing less, nothing else.

I need (check for 7 characters)

pattern=".{7,7}"

and (check for only numbers)

pattern="\d*"

working together, but you can't define pattern two times, how would I combine these two together?

Wiktor Stribiżew · Accepted Answer · 2017-06-12 12:24:19Z

2

You may use

pattern="\d{7}"

or with explicit anchors:

pattern="^\d{7}$"

See a regex demo.

You do not need to specify identical values for the minimum and maximum thresholds. In case you want to allow 1 to 7 digits, then it makes sense: pattern="\d{1,7}".

input:valid {
  color: black;
}
input:invalid {
  color: navy;
}

<form name="form1"> 
 <input type="text" pattern="\d{7}" title="7 digits only!" required/>
 <input type="Submit"/> 
</form>

To make the input field obligatory, add the required attribute.

edited Jun 12, 2017 at 12:24

answered Jun 12, 2017 at 11:46

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

2 Comments

vlovystack Over a year ago

One more question: if you input nothing, the form still sends, what can I add to stop this?

Wiktor Stribiżew Over a year ago

@MatthiasVerhoeven: Use the required attribute.

Mazai E S · Accepted Answer · 2017-06-12 11:56:01Z

0

Try this code

 pattern="[0-9]{7}"

answered Jun 12, 2017 at 11:56

Mazai E S

494 bronze badges

Collectives™ on Stack Overflow

Combining two regex in input restriction "pattern"

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related