The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
[B][U]Basic validation of your HTML web form, client-side, using JavaScript[/U][/B]HTML web forms allow web users to submit information to the web site directly, whether it be for a search query, online order, forum post or general feedback. The problem is that some web users don’t fill in the form fields in the way that the web site owner would have liked. This is why web form validation is often used on many websites.
There are two types of validation, “client-side” and “server-side”.
Client-side validation
Client-side validation is performed by the users web browser, such as Internet Explorer, Firefox or Safari, using a web scripting language, such as JavaScript. This is done without the web page having to be reloaded, and so can provide instant feedback to the user when a problem with their entered information is detected.
Using client-side validation can speed up the entire process for the end user (the person filling in the web form) and encourage them to send information that you can easily make use of. The downside being that if JavaScript is disabled or not otherwise available, the validation will be completely ignored.
Server-side validation
Server-side validation is performed on the web site server, meaning the web page needs to be sent in order for the validation to take place. If a problem is detected, the web server must then send back another web page, alerting the user to the problem, and asking them to submit again.
The benefit of server-side validation is that even if the user has JavaScript turned off, the validation can still take place. Freeola’s Form to Mail script contains limited server-side validation (if you require it).
While this is a guide to using JavaScript to validate a web form, it is important to note that client-side validation should not be considered a replacement for server-side validation, but rather a complimentary addition to it. The benefit will be to the end user, who can receive instant notification of any incorrectly entered or missing information.
While JavaScript is not the only web scripting language available, it is the most widely adopted, with all major web browser’s supporting it to a degree. It is for this reason that you should use JavaScript for client-side validation, as opposed to, say, VBScript, which is currently only available to the Internet Explorer web browser.
It should also be noted that this is a pretty basic guide to getting started with validating a web form using JavaScript, and won’t cover every available option at your disposal. It is also assumed that the reader has a basic grasp of HTML, and can create an HTML web form.
The methods used below are also not exclusive to the examples provided. You don’t only have to use the matching example for passwords, or the no empty field example for someone’s name.
Getting started
Each of your HTML form controls should contain the
name attribute, which you will need to have on hand when putting together your validation code. Referencing these name values will be done via the form object model, which is built-in to web browsers.If your form controls do not contain
name attributes, you can still refer to them in the order that they appear, but this might be a little tricky if you’re just starting out.JavaScript can be reference to either internally within the HTML web page, or in a separate file. Which method you choose is down to you, although you should use an external file if your scripts will be used by more than one web page.
Below is a simple example of how to apply JavaScript to your html page.
Internal example:
External example:
Whichever method you choose, the JavaScript validation code will be enclosed in a function called
validate. To make the web browser use this JavaScript function, you will need to add the code onsubmit="return validate(this);" to your HTML <form> element, for example:
<form method="post" action="form-catch.php" [B]onsubmit="return validate(this);"[/B]>
This tells the web browser that if JavaScript is supported, if should check with the function
validate before it actually submitted the form. The function will then run the validation code, and tell the web browser if it can submit or not.The code that appears within the
validate function will be your own, and how the final code looks will all depend on what type of validation you require. The base code is listed below, which you’ll need to copy and paste in to your web page or external JavaScript file.
function validate(f) {
[U]// JavaScript validation code goes here.[/U]
return true;
}
The underline text // JavaScript validation code goes here. will need to be deleted, and replaced with your own code.
The code
return true; must be the last bit of code, as this is the OK given to the web browser if the form validation is completed, and no problems are found. Throughout the script, you’ll use the code return false; that tells the web browser to stop because a problem was found, and that it should not submit the form until the validation code has been run again.With that out of the way, lets get right in to some examples that you may make use of.
No empty form fields please!
Probably the most common form control used is the single input box, which allows a user to enter a line of text. This is usually their username, first name, email address, etc. Often, these will be marked as being required, in that they can’t be left blank.
To check if field is empty, you can use the code
if (f.firstname.value == 0), which basically means “if this field equals nothing”. This doesn’t just cater to missed out fields, but also those that a user may just have pressed the spacebar, resulting in 3 or 4 blank spaces.The
f in the code is the reference to the current form that the user is filling in, while the firstname is the actual value within the name attribute of the input element. In this case, the above code refers to the HTML element <input type="text" name="[B]firstname[/B]">. The value is a property of the HTML element, which refers to the actual text entered by the user (for example, this could be “John”). Each of these must be separated with a period (full stop, or dot), but no spaces.Below is the code that will check for and alert the user if they have forgotten to enter their first name. The code first checks if a value exists, and will ignore the block of code between the curly brackets ({ }) if a name was entered. If a name wasn’t entered, then the code within the curly brackets ({ }) is executed.
In this case, the code would first alert box the user that there was a problem:
-
alert("Please enter your first name.");Then, reset the field to be empty, removing any spaces that may have appeared.
-
f.firstname.value = "";Then, set the focus to the element that was not filled in correctly:
-
f.firstname.focus();Finally, the JavaScript code would end, and the form would not be allowed to submit:
-
return false;This would then allow the user the opportunity to fill in the information that was being asked of them.
As mentioned above, the validation code needs to appear within the
validate JavaScript function. If you were to use the example form validation mentioned above, the whole JavaScript code you would need may look like this:
function validate(f) {
// Validate first name.
if (f.firstname.value == 0) {
alert("Please enter your first name.");
f.firstname.value = "";
f.firstname.focus();
return false;
}
return true;
}
To apply the validation to the next form field, you would need to make a copy and paste of the code, and change it to refer to the form field as required, for example:
if (f.[B]last[/B]name.value == 0) {
alert("Please enter your [B]last[/B] name.");
f.[B]last[/B]name.value = "";
f.[B]last[/B]name.focus();
return false;
}
The above code sample isn’t exclusive to the single input box form control, and can be used for the or