html-form: email not validating against pattern

Question

I'm desperate. Trying to validate an email-form-field with pattern and it don't work.

This is the field:


....

    
    
     Eine korrekte Emailadresse ist unbedingt erforderlich!

It always shows the invalid-feedback.

When in console I do this, it works.

mailpattern=/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,4})+)$/i;
mailpattern.test('me@home.de');
true

but validating it with this function fails:

function validateFormFields()
{
    let f = document.getElementsByClassName('needs-validation')[0];
    if (f.checkValidity() === false) 
    {
        f.classList.add('was-validated');
        return false;
    }
    return true;
}

Where am I going wrong?

S O L U T I O N

Both ways (@Developer and @Ryszard Czech) lead to validating the form. But the easiest and fastest way is to remove the slashes. Then checkValidity() works like it should!

user_11329890 · Answer

Use

pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}"

Remove slashes and flag, [a-zA-Z] is case insensitive by itself.

If you need to use the second expression use

pattern="[\w.-]+@[\w.-]+\.\w{2,4}"

user_14695522 · Answer

Is this what you needed? The main 2 problems were that

you didn't have any element with the class with "needs validation" on it, (I added to your function to check if there are no "needs-validation" classes), in order to prevent errors.
the regex you posted was not applied to the code, and the Html f.checkValididy() function didn't seem to be working, so I replaced the Html validation with your regex.

Here's the Snippet:








    
        
        
         Eine korrekte Emailadresse ist unbedingt erforderlich!

html-form: email not validating against pattern

2 Answers