pattern attribute not working in Chrome and Edge but works fine in Firefox

I have this input

<input id="email" type="email" name="email" placeholder="[email protected]" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-zA-Z]{2,}">

I can write "email@t" in the input and still submit the form while using Chrome or Edge. But when i use firefox the pattern works just fine so the input is invalid if i just write "email@t"

25 Replies

Tok124 (CSS Nerd)OP•2y ago

bump

Azyrum•2y ago

Make it in javascript

form.addEventListener("submit", function(e) {
  
  let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  
    if(!emailInput.value.match(pattern) || emailInput.value.length === 0) {
      emailInput.style.borderColor = "red"
      emailError.textContent = "Please provide a valid email."
      e.preventDefault()
    }
 })

form.addEventListener("submit", function(e) {
  
  let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  
    if(!emailInput.value.match(pattern) || emailInput.value.length === 0) {
      emailInput.style.borderColor = "red"
      emailError.textContent = "Please provide a valid email."
      e.preventDefault()
    }
 })

Here's what i made a long time ago, there's probably better ways of doing this but yeah you can get an idea on how to do it //edited

Tok124 (CSS Nerd)OP•2y ago

Thanks, yeah i guess i will use this solution for now. but i am still curious why the pattern only works in firefox hmm...

13eck•2y ago

A quick test in Chrome and it's not letting me submit. Is there something else in your code that could be removing the validation somehow?

Tok124 (CSS Nerd)OP•2y ago

Hmm strange. Nope, it's not even if i just do

<form action="" method="POST">
  <input id="email" type="email" name="email" placeholder="[email protected]" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-zA-Z]{2,}">
  <button>submit</button>
</form>

<form action="" method="POST">
  <input id="email" type="email" name="email" placeholder="[email protected]" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-zA-Z]{2,}">
  <button>submit</button>
</form>

It wont work. Even if this is all i have. Maybe it's because i am trying it on codepen. That is the only thing i can think of...

13eck•2y ago

Add a type="submit" to the button I used a submit-type input on Codepen

Tok124 (CSS Nerd)OP•2y ago

It still does not seem to work for me

13eck•2y ago

Interesting…I'm getting the same behaviour. <input type="submit"> works fine, why isn't a submit-type button working?

Tok124 (CSS Nerd)OP•2y ago

And :invalid shows it's also not invalid if i write email@t

13eck•2y ago

C'mon, Chrome, y u do dis?

Tok124 (CSS Nerd)OP•2y ago

it works for you if you use input instead of button?

13eck•2y ago

Yep

Tok124 (CSS Nerd)OP•2y ago

Hmm even that is not working for me xD But yeah i use edge Maybe i should try with input on chrome, see if that works Hmm the form is still being submit in chrome even when i use input

13eck•2y ago

On Chromium both submit-type input and sumbit-type button don't let me submit when the email doesn't match the pattern

13eck•2y ago

Tok124 (CSS Nerd)OP•2y ago

Oh hmm I don't have the chromium browser. But yeah this is really strange

13eck•2y ago

Yet one more reason why they say to validate on both front- and back-end :p

Tok124 (CSS Nerd)OP•2y ago

Yeah hahaha Thats really great to keep in mind since i also write back-end sometimes

Rägnar O'ock•2y ago

Don't do that, if you do it like this autofill tools (like password managers) can't guess what to put in the field The issue might come from using a pattern and a type=email. Maybe try to remove the pattern if all you do is checking for a valid email address

Tok124 (CSS Nerd)OP•2y ago

Well if i remove the pattern it wont be checking if the email is valid

dys 🐙•2y ago

The type="email" will cause it to validate the input as an address.

Tok124 (CSS Nerd)OP•2y ago

yes but if i just do type="email" i can write just "email@d" which is not a valid email

dys 🐙•2y ago

It is possible for a top-level domain to have a MX (mail exchanger) record associated with it, meaning email@cc could be a valid address. I guess it is true that there are currently no single letter top-level domains, but there's nothing preventing the creation of one, so email@d could be a valid address at some point.

Tok124 (CSS Nerd)OP•2y ago

Oh okay

Rägnar O'ock•2y ago

And if you want to make sure the user entered the correct address you can always send a verification email with a magic link once the form is submitted (and your regex would have matched mails that are not valid too [email protected] isn't valid because -.tld is not a valid domain name, and I don't think [email protected] would be valid either

Gaming

Programming

pattern attribute not working in Chrome and Edge but works fine in Firefox