The Ultimate Toolbox for creating amazing web sites!
Form validation One of the great features of WYSIWYG Web Builder is the powerful form tools. Not only can you easily create forms with the Form Wizard or create them from scratch with the form elements in the toolbox but there are also several form validation options. In this tutorial we will introduce the available validation options.
The following form elements have support for validation: - captcha - checkbox - combobox - editbox - file upload - radio button - text area
In this tutorial we focus on the validation of the editbox and in particular email validation. More details about the other options can be found in the help. To access the validation tools click the 'Validate' tab in the object's properties.
There are 3 validation modes: - Default - Info bubble (real-time) - HTML5
Info bubble (real-time) validation Select this option to enable real-time validation. The input field will be validated as soon as it loses the focus without the need for the user to press the submit button first.Real-time validation uses info balloons instead of the standard message box, this give your forms a professional look and feel. To configure the style of the balloons click the 'Settings' button. You can configure the colors, font, bubble type, position and animation effect.
If the validation type is set to 'Info bubble/real time validation' then the Title property will be used for the info text. You can set the Title property in the General section of the object's properties.
HTML5 validation Select this option to use native HTML5 form validation of the browser. Note that this feature is not available in all browsers yet and the appearance of the message will also be different.
One of the benefits of this option is that you can apply your own styling to the form field based on the state of the input. For instance you can give an edit box a different color when the input is invalid.
Here's an example how you can assign different style to different validation states using the built-in styles feature of WYSIWYG Web Builder:
Step 1 Open the Style Manager and add a new style. Name it 'validation'. Specify the following values: - border color: #000000 - border style: Solid - border width: 1 - background color: #FFFFFF Click OK to save the style.
Step 2 Select the new style in the Style Manager and click 'Copy'. Change the name to: validation:invalid Set the background color to #FF0000 Click OK to save the style.
Step 3 Select the new style in the Style Manager and click 'Copy'. Change the name to: validation:valid Set the background color to #00FF00 Click OK to save the style.
Now you have 3 new styles in the Style Manager: validation validation:invalid validation:valid
Step 4 Insert an edit box, open properties and click the Style tab. Now select 'validation' in Predefined Style.
Step 5 Click the 'Validation' tab of the editbox. Set mode to HTML5. Set data type to Email address.