Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Input Pattern Case-Insensitivity

I'm trying to create something right now and I need the pattern attribute that was introduced in html5 tp be case-insensitive but as far as I know, you can't have flags to do this.

There was a question asked in 2011 where it was stated that input patterns are case-sensitive and I was hoping that this was changed since then. If not, I'd like to know if there is a way to get a pattern to become case-insensitive. I can't just use the basic [a-zA-z] because I need to match a four letter word so as an example, it would start off really long (word)|(WORD)|(Word)|(wOrd)... and so on.

Is there a way to get a case-insensitive pattern like this?

EDIT:

Appears I haven't been to specific in my details, I need a specific word, not just any 4 letter word.

like image 825
Spedwards Avatar asked May 25 '14 04:05

Spedwards


People also ask

Are HTML5 cases insensitive?

Since HTML5 isn't case-sensitive, it means that all XHTML tags are the same tag in HTML5. The idea behind HTML5 eschewing case-sensitivity was to make it easier for new web professionals to learn the language.

Is HTML tags case-sensitive?

In documents in the HTML syntax: Tag names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the elements given in the HTML elements section of this document; that is, tag names are case-insensitive.

How do you match a pattern in HTML?

The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission. Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. Tip: Use the global title attribute to describe the pattern to help the user.


2 Answers

Ok I think I figured out an easier way to do the pattern other than listing each combination.

As an example, I'll use the word, "five".

[fF][iI][vV][eE]

so

pattern="[fF][iI][vV][eE]"
like image 65
Spedwards Avatar answered Nov 02 '22 00:11

Spedwards


You can use:

pattern="[A-Za-z]{4}"

For example:

<input type="text" name="username" required pattern="[A-Za-z]{4}" />

This input has to be filled up with four case-insensitive alpha characters.

Update: You didn't respond which specific words you want to match but you can do it like:

pattern="word|WORD|Word|wORD"

So, for example:

<input type="text" name="username" required pattern="word|WORD|Word|wORD" />

Find more variations if needed.

like image 24
The Alpha Avatar answered Nov 01 '22 23:11

The Alpha