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:

<form id="benutzerform" name="benutzerform" action="" method="POST" class="row g-3 mb-3 pb-3 needs-validation" novalidate="true">
....
<div class="input-group has-validation">
    <span class="input-group-text"><i class="bi bi-at"></i></span>
    <input type="email" class="form-control" id="email" pattern="/[^@]+@[^@]+\.[a-zA-Z]{2,}/i" required>
    <div class="invalid-feedback"> Eine korrekte Emailadresse ist unbedingt erforderlich!  </div>
</div>

It always shows the invalid-feedback.

When in console I do this, it works.

mailpattern=/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,4})+)$/i;
mailpattern.test('[email protected]');
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!

this is the way, bootstrap shows messages at client-side validation. f.checkValidity() adds pseudo-class :invalid or :valid to the formfields and bootstrap shows the invalid-feedback field when form-class is changed to .was-validated — raschid
– raschid, Commented Apr 9, 2021 at 16:59
I added the form-tag to my initial post. The rest of the form validates like you would expecrt ... — raschid
– raschid, Commented Apr 9, 2021 at 20:55
The best way to validate an email address is to send an email and check the return value. Please, have a look at these sites: TLD list; valid/invalid addresses; regex for RFC822 email address — Toto
– Toto, Commented Apr 10, 2021 at 9:32

Ryszard Czech · Accepted Answer · 2021-04-09 21:22:04Z

2

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}"

answered Apr 9, 2021 at 21:22

Ryszard Czech

18.7k4 gold badges27 silver badges39 bronze badges

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

1 Comment

raschid Over a year ago

Thank you. Removing the slashes made it work!

Developer · Accepted Answer · 2021-04-09 17:33:06Z

1

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:

<html>

<head>

</head>

<body>
    <div class="input-group has-validation">
        <span class="input-group-text"><i class="bi bi-at"></i></span>
        <input type="email" class="form-control needs-validation" id="email" pattern="/[^@]+@[^@]+\.[a-zA-Z]{2,}/i" required>
        <div class="invalid-feedback"> Eine korrekte Emailadresse ist unbedingt erforderlich! </div>
        <button onclick="alert(validateFormFields());">validate!</button>
    </div>
</body>
<script>
    function validateFormFields() {
        if (document.getElementsByClassName('needs-validation').length > 0) {
            let f = document.getElementsByClassName('needs-validation')[0];
            if (emailAdressIsValid(f.value) === false) {
                f.classList.add('was-validated');
                f.classList.remove('needs-validation');
                return false;
            }
        }
        return true;
    }

    function emailAdressIsValid(email) {
        mailpattern = /^([\w\.\-]+)@([\w\-]+)((\.(\w){2,4})+)$/i;
        return mailpattern.test(email);
    }
</script>

</html>

answered Apr 9, 2021 at 17:33

Developer

1362 silver badges9 bronze badges

2 Comments

PM 77-1 Over a year ago

OP uses Bootstrap.

raschid Over a year ago

I thought about this solution too. But from the docs I would expect a regex that validates fine in a regex-checker or like described above in the console, should validate in my function too. But it doesn't ...

Collectives™ on Stack Overflow

html-form: email not validating against pattern

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related