Unobtrusive CssFormValidator 1.3

A while ago I saw somebody had a formvalidator in combination with classes/dom scripting. I was impressed by this, so I thought "hmm maybe I can create something like that also".

So I made a javascript class to handle the form validation.

Naming the form

When you create the form, make sure the form has an ID-name for example

<form id="frmContact" action="">

</form>

Naming the textfields

This part is simple, just create the form you want. But ... it's not that simple. There are some rules you need to follow.

Let's say you have an textfield called "name", then your textfield would be:

<form id="frmContact" action="">

<input type="text" name="text_name" id="text_name" value="">

</form>

Notice that I've named the inputfield "text_name" and the id also. The "text_" prefix is needed.

Naming the labels

So what about labels? Well, you want labels? I give you labels. The label ID-name would be like "label_name".

So you have somthing like:

<form id="frmContact" action="">

<label id="label_name" for="text_name">Name</label>
<input type="text" name="text_name" id="text_name" value="">

</form>

Naming the fieldset

Maybe you can guess it, you can also use fieldsets. The prefix would be "fieldset_". So you get someting like :

<form id="frmContact" action="">

<fieldset id="fieldset_name">
<label id="label_name" for="text_name">Name</label>
<input type="text" name="text_name" id="text_name" value="">
</fieldset>

</form>

Specify the required fields

You can specify the required fields in a hidden-field. If you have more, you can seperate it with |. for example:

<form id="frmContact" action="">

<input type="hidden" name="cssformvalidator_required_textfields" id="cssformvalidator_required_textfields" value="name">

<fieldset id="fieldset_name">
<label id="label_name" for="text_name">Name</label>
<input type="text" name="text_name" id="text_name" value="">
</fieldset>

</form>

Notice that I've named the inputfield "cssformvalidator_required_textfields"!!!

Specify the required EMAIL fields

You can also specify wich field is an email field. The script will check for an valid email syntax. If you have more, you can seperate it with |. for example:

<form id="frmContact" action="">

<input type="hidden" name="cssformvalidator_required_textfields" id="cssformvalidator_required_textfields" value="name">
<input type='hidden' name="cssformvalidator_required_email" id="cssformvalidator_required_email" value="email">

<fieldset id="fieldset_name">
<label id="label_name" for="text_name">Name</label>
<input type="text" name="text_name" id="text_name" value="">
</fieldset>

</form>

Notice that I've named the inputfield "cssformvalidator_required_email"!!!

To Alert or not to Alert

When the validation fails, you can can choose it the script will alert the errors. Default this is disabled, but you can enable it with the following hidden-field:

<input type='hidden' name="cssformvalidator_show_alert" id="cssformvalidator_show_alert" value="true"/>

Customizing your alert text

When the alert is enabled and the validation fails, you'll get something like

Name is required!

But wat if you want to alter that? Just insert the folowing hidden-field:

<input type='hidden' name="cssformvalidator_alert_text" id="cssformvalidator_alert_text" value="_fieldname_ is required you stupid!!">
Also notice the _fieldname_ string. The script text will get the value within the label tag en _fieldname_ will be replaced with that value.

Styling the fields

Now, you can use your own classes on the inputfields/labels/fieldsets. When the script is started and it finds an required inputfield that isn't validated, the script will add a class named cssFormValidatorError to the inputfield/fieldset/label.

Look in my CSS file how I've used the class.

Starting the javascript class

This is how I start the class:

window.onload=function()
{
var frm=document.getElementById("frmContact");
frm.onsubmit=function(){
var myValidator=new CssFormValidator(this);
return myValidator.validateForm();
}
}

So the javascript class need the form ID-name. So everytime you submit the form, the onsubmit function will be fired.

The examples

So here are my examples

And to download the script: cssformvalidator.js

Other Articles