HTML5 - Pattern attribute can't be used in input element

Question

I'm currently having an input element for a phone number and trying to use the pattern attribute but it refuses to do so. it says "Validation(HTML5): Pattern is not a valid attribute of element input"! When I change the type to "text" it says that pattern attribute is only valid when title is present!

<input type="number" class="form-control"data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>

UPDATE:

I Added title attribute and it's working now! but my only issue is that when i click submit, it submits the form even though that the format is not matching.

For your example: [\+]\d{3}d{9} did you mean d or \d? Also, if the type is number, what's the goal here? To ensure the length? And why not just have \d{12} ? — Anthony
– Anthony, Commented Feb 28, 2018 at 8:33

Sebastian Brosch · Accepted Answer · 2018-02-28 08:29:35Z

5

The <input> should be valid without the title attribute (validated on https://validator.nu/):

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <input type="text" class="form-control" data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>
  </body>
</html>

Additional changes:

A space is missing before attribute data-require.
The pattern attribute is only allowed on the following types: email, password, search, tel, text, or url.

Your regular expression ([\+]\d{3}d{9}) is also invalid. You can try one of the following rules:

[\+]\d{3}\d{9}
[\+]\d{12}

You are missing the \ before the second d to match only numbers. The second pattern is a minified version of the first pattern.

edited Feb 28, 2018 at 8:29

answered Feb 28, 2018 at 8:25

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

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

5 Comments

Yura Over a year ago

the pattern i wrote is for the number to be in the format : +997566666666. can't this be used internationally?

Sebastian Brosch Over a year ago

you know you miss the \ on the second d

Anthony Over a year ago

@SebastianBrosch - not to mention that if it should be \d it simply checks that it's 12 digits long.

Anthony Over a year ago

Since you are using an input of type number, you could also just set the min value to 100000000000 and the max value to 999999999999 to ensure it is 12 digits long.

Sebastian Brosch Over a year ago

And the + character?

Yura · Accepted Answer · 2018-02-28 08:32:07Z

0

It's fixed, just added this in my javascript.

/[+]\d{3}d{9}/.test(PhoneNo)

answered Feb 28, 2018 at 8:32

Yura

1251 silver badge11 bronze badges

Comments

Rasovica · Accepted Answer · 2018-02-28 08:26:37Z

-1

You can add oninvalid attribute to the tag

<input type="text" name="HasAPattern" pattern="\w{3}" title="Enter 3 characters" oninvalid="setCustomValidity('Needs to match patern')" >

The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

You can also use code like event.preventDefault(); inside it to cancel the submit if invalid

answered Feb 28, 2018 at 8:26

Rasovica

2291 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML5 - Pattern attribute can't be used in input element

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related