Case Study: SignUp Form
#Project-Goals
Create a sign up form to better understand how forms work after user clicks submit, the use of Javascript event handler’s role with them, and implementing Regular Expressions and functions to test form inputs.#Intro
I’ve been learning more about inputs, functions, event listeners, and forms and figured making my own fully functional and responsive sign up form would be a great way to improve my knowledge of those subjects.
#Everyones-Got-Them
Sign up forms are all too common these days with virtually every website you find on the web incorporating it. And of course, it makes complete sense. Businesses want you to sign up so they have your information. Take a look at some of those businesses such as Stripe and Postman.
So what better way to show employers that I understand (or at least have dabbled with) sign up forms than creating my own fully-ish functioning form.
#Design
"Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better."
- Steve Krug (Don’t Make Me Think)Design plays a key role in any project. After all, the design and look of any project is the first thing the user sees after the page loads. The user need to be able to tell instantly that this is a sign up page based on the layout and look and instinctively know what to do. Navigating through the site needs to be effortless and seamless and the user should not have to think at all. Oh and the site has to also be completely responsive so it can view it on any device.
##What-We-Need
Inputs with easy distinctions for:
First Name
Last Name
Email Address
Password
Submit Button that provides feedback for success or error
Site to be fully responsive across all platforms
I usually start every design mockup the same way our forefathers did: with good ol’ pen and paper.
Personally it is easier to get the layout and structure down this way as you are not distracted with all the features and options of a design editor.
#Functionality-Usability
“If something requires a large investment of time — or looks like it will — it’s less likely to be used.”
- Same Guy From Before (He's Good)##What-We-Need
Before starting the code for this project I first wanted to understand how this application even works. I attempted to break down each component to its most simplest form.
To tackle this, I went onto Whimsical and created a Mind Map breaking down each and every step and the results that I can think of
#Time-To-Code
The HTML and CSS were pretty straight forward. Create a form with a bunch of inputs nested inside and have a button someone obvious that the user can click on to submit the form. All the components surrounding it was also fully responsive and can resize based on the device it was on.
So far so good.
But life is not always rainbows and butterflies. You are bound to run into bumps on the road that make you question whether or not this road is for you. You can either turn the car around and go back from whence you came or you can take the road bump head on and not let it derail you on your journey.
(Spoiler alert: I chose the later)
#Overcoming-Challenges
At this point the Sign up form itself looked fine and exactly like I pictured it. But now comes the tricky part: Javascript. Being my first actual project using the language, I knew I was in for some anguish and headaches.
Targeting specific parts of the HTML and assigning them to variables wasn’t too bad. I was able to do all that and tested them on the console to make sure I was grabbing them correctly. But now I had take the user’s input and somehow test it to see if it was a valid name, email, and password.
To overcome this I had to learn about Regular Expressions (RegEx). After what seemed like hours and hours of reading MDN docs, watching tutorial after tutorial, and reading articles after articles, I applied my newfound knowledge into action. After I stopped crying, of course.
I first created a RegEx test for each input and assigned/created a path in memory to them onto a variable.
Next, I tested each one by one starting with the input for first name:
Here is a breakdown of the logic behind the code:
When user types something into the input field, the value is tested against the RegEx test I created. If/once the input fails the test, a class of .error will be added onto the input which places a red border around the input and props an error message up to notifying the user that an error has occurred.
If the user deletes the initial input, the .error class and error message will then need to be removed so user can start with a clean slate. If user next inputs a value that passes the RegEx test, a class of .success will be added onto the input which this time places a green border around it signifying the user that his input is valid and he can move onto the next input field.
I continue to use to formula for the rest of the inputs. Each input will continue to test the user’s inputs against their specific RegEx test and will throw errors as long as the inputs fail.
The same method is applied to the Submit button. Once clicked, the function will run to make sure all the inputs have successfully passed their RegEx test, and if true is returned, a notification will pop up letting the user now their inputs are successful.
#Conclusion
There is still so much I need to learn about JavaScript and even more that I do not know or grasp. But all in all, I enjoyed this project and at the end of the day, deem it as a success. I was able to learn more about event handlers, forms, logics, and gain valuable JavaScript experience.
All that there is left to do is to continue learning more and more. I do aim to come back to this project from time to time and maybe even add some new functionality and things I learn on my JavaScript and Web Development journey.