Not another registration form writeup again, you must be wondering. Well, it is indeed and I will try to make it simple to understand for JavaScript coding beginners like myself.
I started off with the modal template from mdbootstrap. Point to note: It is wiser to do up a simple form by yourself initially instead of copying over the complicated templates which just add a whole load of unnecessary work to yourself. The design of the modal can be improved later on after the script have been written (as fancy as you like).
Wow, that’s excessive! Yes, it is, there’s a shortcut method where you can just reference to id: `regName` by using form1.regName instead of using querySelector for every single input item.
We make a reference to the input (textbox) by either referencing to the name or the id as indicated in HTML page. Why the need for this? In order to do a live validation (where textboxes border turn to red/green), we need to get the value (what the user types into the textbox) and make a comparison with the conditions we have in mind.
What conditions? For instance, the maximum digits for postal code in Singapore is 6, and there is no way a user can type into the textbox digits which is less than/more than 6 in length eg: 702588. How do we set the conditions then? I did it using simple regular expression.
[a-z]: lowercase letters
[A-Z]: uppercase letters
i: Insensitive (which means that the expression can accept both upper and lower case characters)
\d: No. 0–9
\s: allows whitespace
?: Whether ‘character’ in front is present or not, regex still works
{}: Setting of range
{1,50}: Minimum of 1 char and max of 50 char
Note: In my screenshot for regular expressions, there’s a couple of unnecessary backslash \ , please kindly do not follow suit and probably get a better explanation from a professional. The backslash is usually for special characters such as * . ? and etc , where it can function as a normal character.
Where did the classes .green and .red comes from? I just added them in with the intention of adding the names to the existing class. When the class is being called, i want the borders to appear as limegreen or orangered depending on whether the comparison of conditions(regex) and input value, turn out to be true or false.
To ensure that the validation is shown live to users when they are keying in the details in the input box, instead of using ‘click’, we use a ‘keyup’ event where every key pressed and released is registered and used as a comparison to the regular expressions I have set. In simpler format, it is basically :
regex.test(input.value), dot test is a method and every method comes along with ( ).
regex.test : the regular expression set for the conditions I want
input.value: (name1.value) refers to the characters that users have typed in
ev.target : referencing name1
Using if else statements, if regex pattern is equivalent to the input keyed by the users (presuming it matches), I create a class named “green”. The class will be toggled to according to whether user input matches the regex pattern or it doesn’t. (Screenshot and example of how it looks like below)
Why did I split the address into 4 boxes when it’s just applying to Singapore’s context, said someone. A few years ago, my friend helped me to purchase a top off some random blogshop and in the form, they have only provided us with one single input textbox to fill in for “Address”. After submitting the form and payment, I realized that I had forgotten to indicate my Unit number. Admittingly, it was me who made the mistake but, had a business webpage been done properly, this issue probably wouldn’t have happened and also, there will be lesser hassle for the shop owners/staffs as well.
Now, why did I mentioned that it’s a hassle to use free templates?
1. Its a whole lot of HTML you will be looking at for a beginner.
2. Screenshot above, even though I know specifically where my modal is located at, think about the numerous arrows located within that I have to click through while trying to see where my .green /.red class appears. The numerous times I need to refresh because of a mistake in my code. Ideas kept floating around my head, whether I should use setAttribute(which I didn’t even realize I had a class attribute until after checking the console), should I use className or classList, and etc.
3. You need to overwrite and hard code in the CSS the height/width/border-color/ etc , for the textboxes to stick in place especially when you are doing any form of live validation. (I took awhile to figure this out w/o googling, so you’re welcome!)
