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?
1 Like
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.
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?
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.
I want to suggest you using easy to integrate JS Widget: https://debounce.io/solutions/javascript-widget/
Hat the same issue. Type=email was not working properly.
Was able to solve this by adding a custom attribute. 
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/.
1 Like
Hi AmandaK, thanks for sharing! I just tried this but emails like “test@test” still go through. Is that part of the validation too?
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())
})
I tried it, but it doesn’t work.