This article shows you some simple codes you can use to process forms on the client side checking for errors before the data is sent to the server.
With JavaScript you can process information users of your website entered in a form before the data is sent to the server. You can alert the user that he/she forget to fill in a field or only allow numbers in a certain field. This will also prevent the user from having to press the back button to get back to the form (some browsers clear forms when you press the back button). It is important though that you still validate the data on the server side too because users with JavaScript disabled can get around JavaScript validation.
To start, add the following attributes to the opening <form> tag if you don't already have these attributes:
| Attribute | Value |
|---|---|
| name | myform |
| onSubmit | return validate(); |
Now the opening form tag should look similar to this:
<form name="myform" onSubmit="return validate();" action="">
Now create a new file in your home directory called validate.js, in that file put the following code:
function validate() {
return true;
}This creates a function which will run when a user submits the form. All code inside the curly brackets will be executed.
If you want to use any of the following codes copy and paste them between the curly in the file you just created called validate.js. Replace NAME with the input field name.
Check For Empty Field
if (document.myform.NAME.value.length < 1) {
alert("Please make sure all fields are not empty.");
return false;
}Limit Characters in a Field
if (document.myform.NAME.value.length > 100) {
alert("Your message is too long. Please shorten it.");
return false;
}Right now the maximum amount of characters allowed is 100 but you can change that.
Allow Only Letters (A-Z)
var message = document.myform.NAME.value;
var allowed = /^[A-z]+$/;
if(!allowed.test(message)) {
alert("The field only allows letters (a-z).");
return false;
}This will check if the information the user entered in a form contains only letters. If it does not the user will receive an error alert message.
Allow Only Numbers
var message = document.myform.NAME.value;
var allowed = /^[0-9]+$/;
if(!allowed.test(message)) {
alert("The field only allows numbers.");
return false;
}This will allow the user to enter only numbers into this field.
Allow Only Letters & Numbers
var message = document.myform.NAME.value;
var allowed = /^[A-z0-9]+$/;
if(!allowed.test(message)) {
alert("The field only allows letters and numbers.");
return false;
}This will allow the user to enter only letters and numbers into this field.
Your file called validate.js should look something like this once you picked out all codes you wish to use:
function validate() {
if (document.myform.NAME.value.length < 1) {
alert("Please make sure all fields are not empty.");
return false;
}
if (document.myform.NAME.value.length > 100) {
alert("Your message is too long. Please shorten it.");
return false;
}
var message = document.myform.NAME.value;
var allowed = /^[A-z]+$/;
if(!allowed.test(message)) {
alert("The field only allows letters (a-z).");
return false;
}
return true;
}On the page where you display the form add this code to page head section:
<script language="JavaScript" type="text/JavaScript" src="/validate.js"></script>
That's everything you need to do!
Below is an example I made. Try pressing the button "Test" with nothing in the textarea. Afterwards try pressing "Test" with only numbers in the textarea. This textarea only allows letters.
Thanks for reading. If you have any questions or comments please post them below.
