 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
VegUISiteKit - Implementing Formcheck
written by vegu on 09 Apr, 2007 05:26:03
With VSK Formcheck you can add client-side validation of user input to any of your HTML forms. Before we start off with this tutorial let me make clear that this script is not supposed to replace server-side validation and doing so would be stupid.The script's main purpose is to enhance the experience of the user as their input gets checked for errors and the user is notified before the request is sent to the server.
Let's start by creating a little test form that we will use to test formcheck on. This is a very simple form, with a name, email and URL field.
code: html<form action="somescript.php" method="post" onsubmit="return vsk_formcheck(this)">
<table style="width:100%">
<tr>
<td style="width: 100px">Name:</td>
<td style="width: 200px">
<input type="text" class="test" vsk_error="name_error" vsk_required="1" /><br /></td>
<td id="name_error"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" class="test" vsk_error="email_error" vsk_email="1" /><br /></td>
<td id="email_error"></td>
</tr>
<tr>
<td>URL:</td>
<td><input type="text" class="test" vsk_error="url_error" vsk_url="1" /><br /></td>
<td id="url_error"></td>
</tr>
</table>
The most important part of the code above is the onsubmit event that is set on the form tag. When the form is submitted the vsk_formcheck function is called. The argument submitted to the function will be a pointer to the form element itself (this).
What follows is a table that holds label - field pairs.
On the input elements you will notice two specific attributes, vsk_error and vsk_*. The first attribute is optional and only needed when you wish to specify the node in which the potential error message for the individual field shall be displayed in. More on that later.
The second attribute defines what validation will be applied to the field
- vsk_email - this will check that the input is a valid email address
- vsk_required - this will check that the field is not empty
- vsk_url - this will check that the input is a valid URL
- vsk_numeric - this will check that the input is a number
Of course it is possible to apply multiple validation types on the same field.
In the HTML code above i have also used some css classes and for completeness sake or for the sake of being visually pleasing to the eye (on your end) here are said css classes
code: css.vsk_frmchk_error {
color: red;
font-weight: bold;
}
.vsk_frmchk_error_element {
background-color: red;
color: #fff;
}
input.test {
background-color: blue;
}
The vsk_frmchk_error_element class is the class that will be set on the form element that caused the error (in other words the input, select or textarea element). The vsk_frmchk_error class is the class that will be used for the error message that is displayed.
If you load the page now then it should work already and error messages should be displayed correctly depending on your input.
In our current test the name field is validated to be filled out, the email field is validated to be a valid email address and the URL field is validated to be a valid URL.
Other positions for the error message
In the example above the error message for each field is displayed inside a specific node chosen by us. This is the optimal way to do it, but there is another way.
You can also chose to have the error message be displayed either directly before or after the element that caused the validation error, this will look weird in most cases - especially if you have multiple validation types set for a field - but i decided to put that feature in anyways because it might come in handy for some smaller forms.
Anyways, in order to either prepend or append the error message to the element you submit a second attribute to the vsk_formcheck function. This argument can either be 't' or 'b'. If you submit it as 't' it will be prepended (added before) to the element, if you submit it as 'b' it will be appended (added after) to the element.
code: html<form onsubmit="return vsk_formcheck(this, 't');">
Custom Validation Types
While the pre-defined validation types should be sufficient for smaller web forms i wanted it to be easy to add your own validation types and functions. This is especially useful because my email and url validation functions are probably not the same as your server side validation functions.
If you want to add your own validation type you need to add it to the VSK_FORMCHECK_INIT object.
code: js
/* add a new validation type called "vsk_test" that will validate that a field
* holds the string 'test'
*/
VSK_FORMCHECK_INIT.vsk_test = {
msg : 'Field needs to hold the string 'test'',
func : function (input) {
return (new String(input).match(/^test$/i));
}
};
This should be fairly clear. The name of the object you add to the VSK_FORMCHECK_INIT object is the attribute name you will later use to enable the validation type on a field. The msg property of the object is the error message that is displayed should the validation fail and the func property is the validation function itself.
The validation function has one argument, that is either the field element itself or a normal variable.
In order for it to be the field element a third property would need to be added to the vsk_test object called useField. We dont want that in this case as working with the value alone will be sufficient.
The validation function should be pretty straight forward. It checks if the submitted value is "test" and returns true if its the case and false if it is not the case.
Related Posts
- No related posts
Your Comment
Comments to this post: (1)
RSS Feed for commentsniki
on 19 Jun, 2010 - 20:53:48
Hi,
The system validation formcheck does not work on IE 6 for textarea...Is it so? it works for input type text only not textarea multiline.
Author, Pls answer soon at my email
NIKI
Report this comment
