CODEWITHSUNDEEP
htmlvalidation
F.J
F.J

Reputation: 11

How to use HTML form validation - pattern attribute?

I can't seem to get the pattern attribute to work for the HTML form validation. I have seen a lot of tutorials and it all says the same and it works for them. Though I am using the same technique as the tutorials, I can't get it to work. For an example, please see the below code.

<label for= "firstname" id="firstname">First Name*</label>
<input type="text" name="firstname" pattern="[A-Za-z]" title="Only Alphabets" required/>

I want only alphabets to be inserted into this text box. When I insert numerals, it does ask to match the requested format which is only alphabets. But even when I enter alphabets it shows the message though it is supposed to let me submit the form. I tried all I can but can't seem to find a solution for this due my lack of knowledge. I would really appreciate if you could let me know how to enter only numbers into a field, only alphabets into a field, numbers and alphabets into a field using the pattern attribute for validation. Moreover, I was wondering whether the pattern attribute would be able to help me with this as well. For the National ID text box, I want the user to insert data in a specific format. Like this "A000000". An A in the first followed by 6 digits and if this format is not followed, then to display the message asking to match the requested format. Thank you so much in advance. (Please keep note that I am not using jquery).

Edit

May I please know how to add ' (apostrophe) along with the alphabets? Moreover pattern="[A-Za-z]+" wont let me insert spaces between words. How do I fix that?

Upvotes: 0

Views: 2399

Answers (1)

William Young
William Young

Reputation: 125

The pattern field uses regular expressions. Try:

pattern="[A-Za-z]+"

For the national ID you could use:

pattern="A[0-9]{6}"

Upvotes: 1

Related Questions