HTML input pattern validation is not working

Question

I am trying to validate my HTML input with the pattern attribute. For some cases it's working, for some cases it's not working, and I am not able to figure out why it is breaking.

Let me share two pieces of code with you. Code 1 is working. Code 2 is not. I wrote Code 1 first and then Code 2. I literally copy-pasted Code 2, yet for some reason beyond my understanding, it is not working. Check it out.

CODE1 (the one that's working)

<input id="clinicProfileNumber" name="clinicProfileNumber" ng-model="clinic.profile.number" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">

Code2 (the one that's not working)

<input id="doctorProfileContactnumber" name="doctorProfileContactnumber" ng-model="doctor.profile.contactNumber" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">

Let me give you a few other examples of code that is not working:

<input id="doctorProfileEmail"
       name="doctorProfileEmail"
       ng-model="doctor.profile.email"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
       required type="text"
       class="user-input"
       title="Please enter a valid email." />

<input id="doctorProfilePassword"
       name="doctorProfilePassword"
       ng-model="doctor.profile.password"
       type="text"
       class="user-input"
       pattern=".{6,}"
       title="Must contain at least 6 or more characters">

</div>

Please check this and let me know what am I doing wrong.

I could never get pattern to work for some reason. stackoverflow.com/a/78954373/3969362 — Slion
– Slion, Commented Sep 5, 2024 at 18:21

Peter Mortensen · Accepted Answer · 2020-12-31 14:16:47Z

3

Your code is looking great. Just add it in the form tag, like this

<form action="demo">
    Country code: <input type="text"
                         name="country_code"
                         pattern="[A-Za-z]{6,}"
                         title="Three letter country code">

    <input id="doctorProfileContactnumber"
           name="doctorProfileContactnumber"
           ng-model="doctor.profile.contactNumber"
           type="text"
           class="user-input"
           pattern="[0-9]{10}"
           title="10 digit mobile number">

    <input type="submit">
</form>

edited Dec 31, 2020 at 14:16

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 14, 2016 at 7:23

Shrikant

5385 silver badges16 bronze badges

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

2 Comments

Shrikant Over a year ago

action is the attribute which is used to called function on form submit using input type="submit" as mentioned above.

Sarthak Batra Over a year ago

Hey @Shrikant .. Turns out, I hadn't given the <form> element the "'action=demo'" attribute. And I was pulling my hair out about it. Thanks, man!

Peter Mortensen · Accepted Answer · 2020-12-31 14:18:42Z

0

I tried it out. It seems to be working fine both of them.

<form name="formname">
    <input id="clinicProfileNumber" name="clinicProfileNumber" ng-model="clinic.profile.number" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">
    <input id="doctorProfileContactnumber" name="doctorProfileContactnumber" ng-model="doctor.profile.contactNumber" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">
    <input name="" type="submit" />
</form>

It could be because your input element is not enclosed in a form tag as shrikant has stated or your JavaScript model could be conflicting. Try removing ng-model.

edited Dec 31, 2020 at 14:18

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 14, 2016 at 7:37

Rexy Joseph

12 bronze badges

Collectives™ on Stack Overflow

HTML input pattern validation is not working

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related