Best practice to validate email inputs as the default email input still allows errors

Ask us anything
1

Hi, I have a sign in form with an email input field. I find its possible to provide illegal combinations that get past the default Weweb input filter.
I know its getting though as the Xano backend is detecting the issue and responding with an error

Combinations that seem to get through the default email input are:
aaa@com (missing the period)
D...@home.com (too many periods before the @)

So it looks I need to add a further set of filtering to catch these additional combinations in my workflow.

Is there a best practice that guarantees to catch all illegal email combinations apart from building it from the ground up?

2

It’s actually a valid email address.

You can add extra rules if you want to enforce a specific email format:

  • add a pattern attribute to the input and specify a regular expression. This is a quick starting point but it can be bypassed by the user.
    image
    image371Ă—580 19.1 KB
  • add a check in your submit workflow. You can use regular expressions again or any other way to parse the email and check its validity. You can trigger another workflow to show an error message if needed.
  • validate the email on the backend and return an error if invalid. Based on the response you can trigger a workflow to show a success/error message. This is the safest way to have a valid email in your backend logic.
1 Like
3

Thank you,

I am allowing the backend to validate the email further and then triggering a meaningful workflow response to the user, it looks to work fine.

In that way, I filter at the front end and also capture the backend filtering to ensure a cleaner email.

2 Likes
4

I like the technique using the html attribute “pattern”.
However, i’ve just noticed that I can’t do it for several patterns.

How should I approach this ?

5

what do you mean by several patterns?
the html pattern attribute is a regular expression so you can create expressions that check for multiple patterns.
for example (hello)|(world)

1 Like