004 – Cleaning up Form Validation – JavaScript Noob to Pro

So in the last episode, we added some form validation to our basic form. However, we need to tidy things up because there is a lot of replicated code and functions doing multiple actions when they could be split up.

Adding Some Variables


So we can see that we have “document.getElementById” littering our file and we want to avoid repeating ourselves using the “DRY” principle, which stands for Don’t Repeat Yourself.

So what we can do here is at the top of each function we can assign the “document.getElementById(‘idName’)” to a variable, then later in that function we can just reference variable name instead.

So last time we left off with this for our Javascript

If we apply our variables then we can reduce this file to look like this

So this looks quite a bit neater and it means that if we want to extend this then we can just reference the variables instead. You will see I didn’t create a variable for the “commentCounter”, this is because it is only used once so there is no real need to declare a variable first, you could if you wanted to though.

One thing that could potentially be an issue though is the fact that we have re-declared the “number” variable across 2 different functions. What we can do here is declare the variables outside of our functions so that we can declare it once and both functions have access to it.



So we moved the comment variable out of the “validateNumberField” function and the “validateForm” to the top of the script. This gives us access to it globally from one variable.

Cleaning up “validateForm”

So our “validateForm” function is doing two different tasks in the one function, which is something we want to avoid if we can. The solution to this is to split each task into its own function and call them both from the validate Form function.

What this helps with is reusing functions. If you have a function for each task then you can possibly reuse that function later down the road. For example, we could make our “checkEmpty” function work so that it would check whichever input field we tell it to and any time we want to check if an input field is empty then we would just call “checkEmpty(‘id_name’)”. We will try and demonstrate this in a later episode.

Fixing “validateNumberField”

So the “validateNumberField” that we run with “onkeyup” to make sure that our number field is an integer currently uses “parseInt” which will attempt to convert the string to a number. However, sometimes it won’t be able to do this and will return “NaN”. Now there are more elegant solutions but let’s look at the simplest one for now. We are going to use an if statement that will make the value go to 0 if “parseInt” is unable to convert the string to an int. To replicate this all you need to do is start off by typing alphabetical characters instead of numbers .

So here we are using a new in built function called “isNaN” which will simply return true if the output of the value passed to it is equal to “NaN”. If it is “NaN” then set the “numberField” variable to 0.

Source code

If you would like the complete source code for this tutorial then you can gain access for only $2.

The reason I have chosen to charge for this is it helps massively when creating these articles to have even a small amount of funding to make all of this viable. So if you feel like supporting me then it would be massively appreciated :).

004 – Cleaning up Form Validation – JavaScript Noob to Pro

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *