Tutorials (in progress)
Introduction Video
Step 1: Form Source
Step 2: Form Type
Step 3: Language
Step 4: Source HTML
Step 5: Thank You Page
Step 6: Choose a Name
Step 7: The Result
Simple Form Validation
Common Form Errors
All Tutorial Videos
Tips, Questions, Feedback

Want More?

Back to WFF
WFF Google Group
WFF Blog

Simple Form Validation

As from WFF 0.1.3, “Simple Form Validation” has been introduced. This means that WFF can now generate code that will show errors as long as the end-user does not filled in all mandatory fields within your form.

As we strive to always keep WFF as simple and easy to use as possible, we came up with, what we believe, is a very simple system to allow generation of web forms containing mandatory fields. There are 2 main components to WFF’s simple form validation:

1. Allow the form designer to easily specify which fields are mandatory.
2. Allow the form designer to easily specify where to display form errors when an incomplete/incorrect form is submitted.

Part 1
To specifiy which fields/inputs are mandatory, all you need to do is have an HTML label which references to your mandatory input as follows:

<label for="input_name">Label Description *</label>

The corresponding Input would look like this:

<input type='text' name='input_name'/>

The asterisk sign (*) within the label tag indicates to WFF that you want the input “input_name” to be mandatory. The position, appearance or size of the asterisk does not matter. All that matters to WFF is that there is an asterisk * within a label tag that refers to an input.

Part 2
Now that you have specified which fields are mandatory within your form, you also need to tell WFF where to display form errors on your form. For example, if someone does not fill in all mandatory fields, WFF will display something like this:

“All required fields have not been filled”

However, You need to specify where you’d like messages like these to appear on your form by adding the following tag at the location the errors need to appear:

<wff:validation_errors />

  Textile Help