Hey guys, I have Material-UI checking with the type="email" and this function that tests inputs as another layer of verification. I have this working regex, but it is ugly and I believe will cause more problems:
const emailChecker = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
What is the better way to go about this?
There 's a js library called Validator. It has many validation functions including email. You can get it in your app via npm.
If you really want to;
/^\S+@\S+\.\S+$/
But just type="email" should be fine.
Email addresses have far too many possible permutations to really be a good fit for any comprehensive regex (note the above one will not validate all valid email addresses). And even if the address is grammatically correct, it doesn’t mean it’s correct.
Absolutely, this is for a take-home for a job opportunity and they wanted you to take the form body and pass it thru this validate function. I’d thought using Material-UI would be best for safety as another layer of validation before going through? Weird case to use this.
Material UI isn’t doing the validation, that’s built into HTML. If you’re using it, then that component accepts normal text field attributes (as props) so you should be able to just pass whatever regex you want to the pattern prop (I don’t use material UI so can’t confirm this works out of the box)
It’s not really a case of safety, though it can aid in that: the reason for doing it is mainly to help the user by preventing bad input, it’s not a security feature (it’ll prevent form submission by default in HTML, but I can literally just go into the inspector, change the type of the field to text, remove regex pattern attribute then submit). Any real security measures always have to happen server-side
So if you’re adding validation, and that validation is for safety purposes, that logic vshould really run on submit, and prevent submission there – again, fairly easy to bypass, but harder than with validation just on the input, but that’s why they’re asking you to run it on the form body. Doing validation on the fields as the user types is a way of sanitising the input, that’s all
Yeah thanks a lot for the clear up here. Yeah they essentially have an empty function that you run on the submit to validate the form body.
Using html5 validation for email is fine, it makes sure the syntax is correct. There is really no way you can truly validate an e-mail outside of sending an e-mail that the user has to reply. Everything else will just be syntax checking and that does not guarantee that the e-mail is valid
/Jakob
I absolutely understand that, but this is for a take-home with only the frontend. I used Nodemailer recently to send the e-mail address an e-mail which worked great for that case.
@rstorms,
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
it may work for some common patterns
here is details https://www.w3resource.com/javascript/form/email-validation.php