Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 861
Yura Avatar asked Sep 13 '25 15:09

Yura


1 Answers

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.

like image 153
Sebastian Brosch Avatar answered Sep 16 '25 08:09

Sebastian Brosch