Intro component Validation form HTML/SCSS/JS

Solution retrospective
All feedback is highly appreciated! How can I improve validation so password and name couldn't contain symbols, foreign charcaters etc. Also, how can I change the error text with js depending on error issue? Like if there are spaces in password - show text 'Password can not contain spaces' and similar. Thanks in advance!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @idesmar
For extra validation on name, password, etc.:
You may want to dive in on Regular Expressions.
Here's an example on evaluating a name value if it has an invalid character
const notAWordCharacterRE = /[^a-z]/ig; let nameValue = "name$"; let invalidNameFormat = notAWordCharacterRE.test(nameValue); // result: true for "name$" if (invalidNameFormat) { // code here for adding error message };
Additional reading: Regular expression syntax cheatsheet
Regular Expressions or RegExp can be a bit overwhelming sometimes but it's going to be a great help moving forward.
Always be hungry for more learning and happy coding!
- @idesmar
Great work! Your app was responsive and passes all the project's requirement!
On the question on custom error message, you can create a nested "if statement" or a "switch statement" that adds a more specific error message. I made a slightly similar error handling process on my project that focuses on the email. There are 2 possible error message on the email field; either empty or invalid email. Here's a link to the web app I made.
I hope that was of help. Happy coding!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord