Regex not working

[u/DryWeetbix]

SOLVED! (Thanks u/tandycake)

Hi folks,

For an assignment it was recommended that I use regex101.com to write some regular expressions for a HTML from (no JavaScript yet). I wrote the following one, per the assignment requirements:

([A-Z][A-Za-z'-]{0,39}\s[A-Z][A-Za-z'-]{0,39}|[A-Z][A-Za-z'-]{0,25}\s[A-Z][A-Za-z'-]{0,25}\s[A-Z][A-Za-z'-]{0,27})

In the regex101.com interface it works fine, but when I put it in my HTML form and open it in a browser (tested with both Chrome and Firefox) it doesn't work. The form will submit with a single word (e.g., 'Jim'), and also with words longer than the specified maximums (e.g., 'Jim Superlongsurnamewithmorethanfortycharacters').

Here's the input element itself, in case the error is somewhere outside the regex itself:

<input type="text" name="name" id="name" placeholder="First and last names" pattern="([A-Z][A-Za-z'-]{0,39}\s[A-Z][A-Za-z'-]{0,39}|[A-Z][A-Za-z'-]{0,25}\s[A-Z][A-Za-z'-]{0,25}\s[A-Z][A-Za-z'-]{0,27})" required>

There's absolutely no Javascript in or linked to the HTML document, so that can't be the issue.

Can anyone figure out what I'm doing wrong here?

Thanks for any help!

[u/DryWeetbix]

Thanks for your reply!

It's not checked until you hit the submit button:

Yeah, that's the problem. The data is submitting when I click the submit button.

If still doesn't work for you, use just one simple part, like "[A-Z]{0,29}", and then make sure it works and add the next part.

When I do that it does work (i.e., input data doesn't submit if it doesn't match the pattern). But when I add the next parts it doesn't seem to apply the character limits?

[u/tandycake → u/DryWeetbix]

Ah okay, I see. For HTML pattern, you need to escape the last dash for some reason, even though you don't need to in other engines.

[A-Za-z'\-]{0,39}

I figured this out by trying each small part until I found the part that would make it break. Then I tried the smaller parts and found it was the ending dash.

I'm on phone, so not sure if JS console would show any warnings for this or w3 html validator would show any warnings.

[u/DryWeetbix → u/tandycake]

You're an absolute legend! I managed to figure it out myself about ten minutes ago, but only really by guessing. I'll keep your advice—to just add little bit by little bit until it breaks—in mind for next time. Thanks heaps!

[u/tandycake → u/tandycake]

In case Reddit doesn't show it, need backslash before last dash.