Setting up fValidate

Depending on your knowedge of HTML and how much you want to do with fValidate, setup is easy to moderate in difficulty. Here are the steps:

  1. Review and set values in the config file
  2. Include JS files into page
  3. Add validateForm function call to form
  4. Add validator attributes to each field/element you want validated

Note - Don't forget to setup your CSS!

Setting the config

Open up fValidate.config.js and edit its settings to your liking. For more on the values in this file, go here.

Back to top

Including the files

The javascript files for fValidate are broken into modules. As of this version, there are 13 modules:

The core and config modules are required, and you must also include at least one module with validators in it. fValidate.validators.js is the validator master-file, and contains all the validators. To include them into your page, place HTML script elements in the head of your page and link them properly:

<head>
    <script type="text/javascript" src="path/to/js/fValidate.config.js"></script>
    <script type="text/javascript" src="path/to/js/fValidate.core.js"></script>
    <script type="text/javascript" src="path/to/js/fValidate.lang-enUS.js"></script>
    <script type="text/javascript" src="path/to/js/fValidate.validators.js"></script>
</head>

I realize including more than one file is a bet tedious, but the flexibility trade-off is worth it. The order is irrelevant with one exception: The validator file(s) must appear last in source order.

Using PHP

For those of you with PHP on your webservers, I've included a PHP file into the package called fValidate.server.php. This file allows you to easily include all your fValidate files from one script element. You can optionally add the compression attribute to have the PHP file remove extraneous comments and spaces.

<head>
    <script type="text/javascript" src="path/to/js/fValidate.server.php?modules=validators"></script>
    <!-- OR -->
    <script type="text/javascript" src="path/to/js/fValidate.server.php?modules=basic,extended"></script>
    <!-- OR -->
    <script type="text/javascript" src="path/to/js/fValidate.server.php?modules=basic&compressed=yes"></script>
</head>

The modules parameter is a comma-separated list of any of the validator modules -- core and config are automatically included. There's more information about this file here.

Back to top

validateForm()

This is the only fValidate function you will have to directly interact with. The syntax for integrating it into your forms is as follows:

<form onsubmit="return validateForm( f[, bConfirm[, bDisable[, bDisableR[, groupError[, errorMode]]]]] );">

Including the return command is vital. Below is a detailed description of each parameter.

Parameters
ParameterTypeDefaultDescription
ParameterTypeDefaultDescription
fObject-This is a reference to the form. Just use the this keyword here.
bConfirmBooleanfalseSetting this to true will prompt the user with a message before after a sucessful validation, but before the data is sent - allowing them to cancel it if they so wish.
bDisableBooleanfalseSetting this to true will disable the submit button(s) after a successful validation to alleviate multiple submission woes.
bDisableRBooleanfalseSame as bDisable but for the form's reset button.
groupErrorBooleanfalseSetting this to true will display all form errors to the user at once, instead of one-by-one as they are found.
errorModeNumber0One of 13 predefined values to set how the user is notified of errors.

Note - This parameter is new as of version 5.00b.

All parameters are optional save the first which must be passed. All Booleans are assumed false, and errorType is defaulted to 0.

Back to top

Adding validator attributes

fValidate works on the premise of validators. That is, pre-defined datatypes against which user-entered form data can be validated. Part of fValidate's ease-of-use is that you assign these validators to your form elements with just HTML -- no scripting is required. By default, fValidate uses the alt attribute to hold the validation code, however, the attribute used can be redefined in the config. Here is an exampe of adding the blank validator to a simple text-input.

<input type="text" name="First_Name" alt="blank" />

And adding the email validator:

<input type="text" name="Email" alt="email|1" />

And that's it! fValidate will find these validation codes and just work!

Note - If you strive for validated (X)HTML, fValidate can cause some issues where the alt attribute isn't explicitly allowed. However, the general trend of XHTML it towards customisation of our markup. I consider this an unfortunate but acceptable side-effect. There are ways to extend the DTD for any given page, but it causes a slight render bug in Internet Explorer. If this does not bother your or you will be placing and absolutely positioned element over the affected area, see my extending the DTD page.

Back to top