Last week I wrote about building HTML form, but even the most important thing is to know how to validate data before you send it to the server. Probably you won’t storage data from your clients with have no value. So how you can use the HTML Form attribute and JavaScript to validate data inserted into HTML FORM on the website?
Let’s start with HTML Form attributes
In this part of the code, you have an HTML form with HTML5 validate tool added. This is the first step that allows a website to check if all fields are fielded and if the email includes the “@” sign. In the password field also when you typing the password the spot appears, which protects visitors’ privacy in some way. You can even improve this protection using an HTML attribute named pattern. But in this case, we skip this step. Last word about HTML form presented above: table form I used just to build a simple skeleton for this HTML form looks. There is no reason that you need to do this.
Java Script as a part of HTML form
Using Java Script you can do two things. First, you can check if the user fills all the necessary data fields and what’s more, if they used the proper data format. In HTML5 there is a “require” attribute that you can set in the input field if you want to push visitors to fill a specific field. But what if the user puts a space, or dot in the email field? This is not good. Your main goal in HTML form is to collect complete data from users, so let’s validate HTML form using JavaScript.
Let’s add JavaScript to our HTML Form
JavaScript code will check if all required input fields get expected values. This is an important step because at this moment we can decide if data collected in HTML form will be sent to the server or alert box appear and ask the visitor to fix input data. But this isn’t a 100% protection tool to prevent server attacks. As you probably know, JavaScript files just like HTML and CSS files are available for visitors and for hackers. They can switch code in these files and break this kind of protection. On the other hand data validation in JavaScript helps people fill HTML form properly so It’s a good practice to do this.
In the code above at the first step, I set the “form” variable with connecting HTML form and JavaScript code. In the next line of code there I set Event Listener on submit action. This means that the code will run after the user hit send button. The next line of code (preventDefault) prevents sending data to the server before the validation procedure.
Then I set three variables, to able me to check stored data in a more advanced way. I mean thanks’ setting this variable I can check if there are enough characters in login or in password, and even if the password or email address includes necessary characters. That’s all I wrapped in if-else construction. What’s more, this code will display users’ different alert boxes depend on which input fields were fielded by wrong data. This helps them correct this field quickly. If the validation procedure succeeds data will be sent to the server.
Is this validation enough?
This type of validation is called client-side validation. It’s because all code action takes place in web browsers. When we talk about regular users this is enough to be sure, that data send to the server has the required format. But as I mention before hackers don’t sleep and they searching for a website where data sending to the server isn’t validated on the server site. What does server site validation mean?
First of all, you can use for example PHP function to remove unexpected characters from sending data and then, just like I wrote in this post validate again data this time using for example PHP. But this is another huge topic, and perhaps I wrote about this latter.