Can you use regex as validation for HTML fields via pattern attribute

Question

I am looking for an easy method of validating HTML fields such as standard postcodes etc. I would really prefer not to use JavaScript due to sheer ease and was hoping it would be possible to use complex regex in the pattern attribute of text inputs.

If you have any better suggestions they are more than welcome.

Thank you

A regex in the pattern attribute would work but <IE10 and safari are not supported so a fallback would be required be that client side with javascript or on the server. — James Coyle
– James Coyle, Commented Mar 27, 2013 at 16:03
Server-side is always require because you can never trust the clients. It is possible to bypass HTML5 form validation, and in fact is very easy with a Chrome flag. — howderek
– howderek, Commented Mar 27, 2013 at 16:25

howderek · Accepted Answer · 2013-03-27 16:27:51Z

4

Yes, as that is the point of the pattern attribute.

Here you may be interested in this: http://html5pattern.com/Postal_Codes

And a UK Postal Code RegEx with optional spaces: [A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]?( |)[0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}

edited Mar 27, 2013 at 16:27

answered Mar 27, 2013 at 16:03

howderek

2,21915 silver badges24 bronze badges

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

6 Comments

Paul Over a year ago

I have used the following regex in the pattern attribute for a postcode field which was provided by the UK government but it just does not work. (GIR 0AA)|((([A-Z-[QVX]][0-9][0-9]?)|(([A-Z-[QVX]][A-Z-[IJZ]][0-9][0-9]?)|(([A-Z-[QVX]][0-9][A-HJKSTUW])|([A-Z-[QVX]][A-Z-[IJZ]][0-9][ABEHMNPRVWXY])))) [0-9][A-Z-[CIKMOV]]{2})

howderek Over a year ago

Here is the one for UK postal codes provided by my link: [A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]? [0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2} and your RegEx doesn't appear to be JS.

howderek Over a year ago

Here is one I just wrote that has optional spaces: [A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]?( |)[0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}, and all the examples you gave validated with the first one I provided, just try them in RegExPal: regexpal.com

Paul Over a year ago

You wouldnt happen to know how to make the space optional would you? The UK government called it a regex I'm not sure whether there are different types?

howderek Over a year ago

@PaulArmstrong See my comment right above yours. Also, there are different RegEx-s depenending on the language. Also, I updated the answer.

|

Mac · Accepted Answer · 2017-08-30 03:32:01Z

For UK abbreviated dates, the following regex could be used for an HTML input pattern attribute, to enforce date-month-year format, where date is 1-31, month is 1-12, and year is 1930-1999...

(?:[1-9]|1[0-9]|2[0-9]|3[0-1])\/(?:1[0-2]|[1-9])\/(19[3-9]{1}[0-9]{1})

Apply the regex, add some CSS visual cues like so, and Bob's your uncle:

input::placeholder {
    color: rgb(46, 163, 242);
    font-style: italic;
}
input:focus {
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.4) inset;
}
input:required:invalid, input:focus:invalid {
    border: 2px solid rgb(255, 159, 159) !important;
    background: white;
}
input:required:valid {
    background: rgba(196, 255, 214, .5) !important;
    color: black !important;
}

section.form-layout input { 
    width: 120px;
    height: 27px;
    border: 2px solid rgb(46, 163, 242);
    border-radius: 5px;
    text-align: center;
    color: rgb(46, 163, 242);
    transition: all .5s ease;
}
*:focus {
    outline: none;
}

<section class="form-layout">
    <p>Enter your DOB <span style="font-style: italic;">(dd/mm/yyyy)</span>:</p>
    <input required id="dob-1" placeholder="Date of Birth" type="text" pattern="(?:[1-9]|1[0-9]|2[0-9]|3[0-1])\/(?:1[0-2]|[1-9])\/(19[3-9]{1}[0-9]{1})" autocomplete="off">
</section>

Collectives™ on Stack Overflow

Can you use regex as validation for HTML fields via pattern attribute

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related