Client side validation w/forms
When creating forms to gather visitor feedback from your site, it’s important you receive the information that is required before allowing the submission to complete. In most cases with web forms, there is usually one field that is required. When the visitor presses the submit button, if this field is empty developers should implement functionality to alert the user for the missing information.
There are two ways to validate form data:
- Client side
- Server side
Client side validation is done by JavaScript, which is executed inside a visitor’s browser. Server side validation is performed by server- side scripts which can be
Before we begin...
Web developers SHOULD NOT RELY solely on JavaScript for their validation. Our reason is simple - if the visitor has JavaScript turned off (disabled) in their browser, validation will not work. Furthermore, relying on JavaScript for validation opens your site to hackers who can easily exploit your code, which in turns can corrupt the data you receive, which in turn is often used to insert results into a database table.
When working with forms, it’s recommended doing client and server side validation. By performing server side validation a hacker could not (at least not easily) exploit your server-side script, since it's parsed before resulting output (normal
Open the file
We will avoid discussing in-depth how the form is created, and instead opt to examine validation techniques with JavaScript. You may open the file in your text editor or web browser, kick the tires, take it for a test drive and if you have questions, feel free to ask me using the link at the bottom of this article. One important piece of code in this file is shown below:
<form name="contact" method="post" onsubmit="return userinformation(this);">
When the visitor presses the submit button, we call the onsubmit attribute. Inside the parenthesis, we call userinformation function, which checks for empty fields which are required and displays an appropriate error message. We pass a parameter in the function call in order for the form to submit once required fields are entered.
Create the JavaScript file
In your text editor, create a new file named contactus.js. Once completed, between the opening and closing head tags of form.html, link to the JavaScript file:
<head>
<script type="text/javascript" src="contactus.js"></script>
</head>
Write the validation function
In contactus.js, write the following:
function userinformation(form){
}
We create a function called userinformation. This function will have multiple validation checks which will be called each time the submit button is pressed to ensure all required fields are not blank. Since we provide a parameter for the function in the opening form tag, we need to pass a parameter in the JavaScript file as well.
Two methods to display our error message
The first method and arguably the easiest way to display the error message can be done by writing the following conditional statement:
function userinformation(form){
if(document.contact.fname.value==""){
alert("Please enter your first name: John");
}
}
Let’s examine the code in greater detail.
First, inside the function we have a conditional statement which does the following:
- It checks to see if the value of the first name field in our form is equal to a null string by using a Boolean check (double equal’s sign)
- If it’s true, we display an alert message
- If it’s false, we do nothing
Save your file. If you open the file in your browser and press the submit button without entering a value in the first name field, you receive the following error message:
While this method works and is simple to create, imagine this scenario: each time a visitor presses the submit button, one error message will show for each field which is required, and then the visitor clicks OK. Imagine if you have multiple fields in a form which require validation and making a visitor go through this mind-numbing experience each time they press the submit button.
A better method and one we’ll use requires a little more work on our part, but a visitor will thank us in the end. Here’s how it works:
- Create two variables
- One named message, which holds our concatenated error message string
- One named noerrors, which is set to the variable above
After performing our validation checks, we perform a simple conditional check with the message variable using a Boolean check (double equal’s sign):
- If it’s equal to noerrors, we do nothing
- If it’s not equal to noerrors, we call the alert function and pass the message variable as a parameter which will inform a visitor which fields are missing
This method is more efficient and user friendly because we provide a visitor with one error message informing them of all errors which have occurred. As a visitor fills in the missing fields, the error message will only show the remaining fields required, allowing for a more intuitive approach and experience for the visitor.
We'll continue next with creating our message and noerrors variables.