In the previous two articles, we built the following Contact Us form. In this article, we will add some more fields, and then make some of our fields REQUIRED fields. Anytime you have required fields, you also need some way to validate that the form was filled out correctly. So we will cover how to do that.

 

Here is our Contact Us form so far.

 

 

 

We are going to add one more section called Mailing Information just to help us better understand validation rules. 

 

 

We will also move the CAPTCHA element to the end of this section.

 

So go to Breezin Forms > Manage Forms and make a copy of Contact Us 2. Then double click on the new copy to open it in the Work Space. Change it’s name to Contact Us 3 and change the file name to contactus3. Then click on SAVE properties and SAVE.

 

Let’s begin by clicking on Page 1, then clicking on New Section to add our new section called Mailing Information.

 

 

Click on EDIT to add the text: If you would like to receive a written copy of our newsletter, fill out the following information:

 

 

Then click on ALL THREE SAVES to save this text.

 

Now click on Mailing Information section and add a new field text element called Street Address and another called City and another called Zip Code.  Then click on SAVE Properties after each and SAVE after you are done with all three.

 

The way to move the CAPTCHA section is to click on it to select it, then right click to copy. Then click on Page 1 to select it then right click and paste. Then go back to the CAPTCHA section, select it, and right click to delete it. Our folders now look like the following:

 

 

Street Address City and Zip Code really should have their field lengths adjusted to 50px, 200 px and 150px so let’s do that by clicking on each and entering the values in the SIZE and Max Length properties as discussed in our second article. Be sure to click SAVE properties after entering each set of values and before moving on to the next element. Then click on SAVE when you are done with all three.

Finally, we are ready to add validation for required elements. But first this message from our sponsor.

 

To make Required or not to make Required? That is the question.

If we make too much stuff required, folks will not want to fill out your form. But if you make nothing required, folks may wonder why you did not respond to them when the problem was that they put in a bad email address. So in general, only make things required if it is information you really need to have. Some typical required fields include first name, last name and email address. We will add a couple more just so you can see how it works. But I do not recommend having too many required fields.

 

What is Validation?  That is the other question.

Validation simply means making sure that your reader has properly filled out the form before it is submitted. This includes making sure that they filled out the required fields (like name and email address) and that the fields included the required information (like an @ in the email address and that the zip code is only numbers and not letters).

 

Now that all of the elements have been entered, we will go back to each element and add any desired modifications. To define required (versus optional) form elements, simply select the desired element and under Validation, check the option Required and in Validation type, choose Library, then select the appropriate validation script and enter an Error Message.

 

Each validation script has a description of its function displayed below the select box Script.

Required form elements are indicated to your readers by a red asterisk * in the frontend.

For example, select the element First Name by clicking on it. Then scroll down to the Validation Area at the bottom of the Form page. Check Required.

 

 

Note that merely checking the REQUIRED box will not make an element required. You also have to put in

a VAILDATION RULE.

 

For Validation, there are three options, None, Library and Custom. It is usually easiest to use the Library which comes pre-loaded with various common validation rules for different kinds of fields.  So for Validation, select LIBRARY. Notice that when you select Library, additional hidden fields come in to view.

 

Click on the dropdown arrow to choose a script to invoke a validation rule. The scripts / validation rules that are installed with BreezingForms include:

 

 

The script to use will depend on the element type. 

 

For Error Message, type in Please enter your First Name and for Script, use the drop down arrow to select valuenotempty. Then click Save Properties: 

 

 

Repeat for Last Name, and City.

 

Then select the State element. For State, for the Script, with the drop down arrow, select “Anychecked”:

 

 

For Zip Code, validation is integer amount.

 

 

For email, check required and for validation of email, select valid email.

 

 

Interests can also be skipped as this is not a required field.

No validation is required any other fields as they are not required fields.

This completes form validation.

 

Click on SAVE Properties, and then click on SAVE to save all of your changes to this point.

 

Here is a list of which validation rules apply to which elements:

 

FF::ff_anychecked
Validates that a radio button in selected in a radio group, or that a checkbox has been checked in a checkbox group.

Can be used with the following elements:

• Radio Group
• Checkbox Group

 

FF::ff_checked
Validates that a radio button or checkbox is checked.

Can be used with the following elements:

• Radio Button (when only one in use)
• Checkbox (when only one in use)

 

FF::ff_flashupload_not_empty
Validates that a file is uploaded using the Flash option in the File Upload element.

Can be used with the following elements:

• File Upload - with 'Use Flash Upload' checkbox checked in Advanced Properties

 

FF::ff_integer
Validates that an integer value is entered.

Can be used with the following elements:

• Textfield
• Hidden Input

 

FF::ff_integer_or_empty
Validates that either an integer value or nothing is entered.

Can be used with the following elements:

• Textfield
• Hidden Input

 

FF::ff_integeramount
Validates that a positive integer value is entered.

Can be used with the following elements:

• Textfield
• Hidden Input 

 

FF::ff_real
Validates that a real number is entered.

Can be used with the following elements:

• Textfield
• Hidden Input

 

FF::ff_realamount
Validates that a positive real number is entered.

Can be used with the following elements:

• Textfield
• Hidden Input

 

FF::ff_securitycode_entered
Checks that a security code was entered.

Not used in QuickMode. 

 

FF::ff_securitycode_ok
Checks that a valid security code was entered.

Not used in QuickMode. 

 

FF::ff_showvalidation
Displays element validation - Used for debugging.

Can be used with the following elements:

• ALL, except Submit Button; Summarize; Captcha; ReCaptcha; PayPal Button; DirectPayment Button

 

FF::ff_unchecked
Validates that a radio button or checkbox is unchecked.

Can be used with the following elements:

• Radio Button (when only one in use)
• Checkbox (when only one in use)

 

FF::ff_validemail
Validates that the syntax for an email address is correct (not the email address itself).

Can be used with the following elements:

• Any Textfield that is used to capture an Email address

 

FF::ff_validemail_repeat
Checks that the field value is a valid email address (syntax only) and has a second counterpart with an equal value.

Can be used with the following elements:

• Any Textfield that is used to capture an Email address

For more information on how this option works, please see this KnowledgeBase article.

 

FF::ff_valuenotempty
Validates that the field value is not empty.

Can be used with the following elements:

• Textfield
• Textarea
• Select-List
• Hidden Input
• Calendar

 

 

If you are interested in seeing how all of this looks and works, you could go to the Main Menu and Click on Contact Us and change the file name to contactus3 and then click on Preview to open up the form.

 

However, we will do all of that after discussing another important issue which is how to improve the appearance of our Contact Us form. This is the topic of the next article.