Email form validation

Design help Custom code
1

Hey community!

I’m trying to add email validation to the subscribe form located here. As of now, it allows invalid emails to subscribe. Specifically emails without the domain extension.

Anyway to add validation?

READ ONLY LINK

1 Like
2

HTML5 input fields with type=email do validate for empty, or user@domain.tld, or multiple. Read more… V

I have not tried to use the pattern attribute on webflow. You could give it a try. If that does not work then you need to use custom code to take it a step further.

3

So you’re saying it should validate it automatically since it’s built in? It’s currently accepting broken email addresses. How do I force the validation?

4

Take a look at this resource.

http://html5pattern.com/Emails

5

I think the key thing to understand is if a browser (or bot) does not support HTML5, then patterns don’t work, input type=email falls back to type=text. So bad emails are always going to get through.

If the issue is spam fills, that is a different story. Just add a recaptcha.

6

I want to suggest you using easy to integrate JS Widget: https://debounce.io/solutions/javascript-widget/

7

Hat the same issue. Type=email was not working properly.
Was able to solve this by adding a custom attribute. :partying_face:

Name = pattern
Value = (?:[a-z0-9!#$%&'+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])")@(?:(?:a-z0-9?.)+a-z0-9?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-][a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])

Got the RegEx from https://emailregex.com/.

Bildschirmfoto 2022-03-01 um 10.59.34
Bildschirmfoto 2022-03-01 um 10.59.34488×984 22.6 KB

1 Like
8

Hi AmandaK, thanks for sharing! I just tried this but emails like “test@test” still go through. Is that part of the validation too?

9

Hi @Austin_U,

Here is the Code that will do that.

function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
}

$('input[type=email]').on('input', function(){
        IsEmail($(this).val())
})
10

I tried it, but it doesn’t work.

12

We ran into similar questions with client projects and created a text validation input script to assist.

Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.

With regard to allowing or not allowing specific types of emails, if you use these attributes (to only allow emails with a .edu ending in this example) it should have the desired effect.

ms-code-require=“email”
ms-code-require-list=“.@.\.edu”

If there are any questions please feel free to tag me!

Happy Friday!