Forms2:Form Validation

[kino]

One of the most important aspects of building and processing a form is how you validate the input data. You want to assist users by providing them with information to help them make choices as they fill out the form and to understand what's required and optional before selecting the submit button.


In classic server-based Web applications, once the enter or submit button is clicked, form data is passed to CGI script, or some other technology. If the data contains an error, there will be a delay before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an error message.

We will incrementally build the registration page. Let's first start with a simple example using a TextField in order to discuss the syntax. The idea is to create a validation requirement that is associated with the control. The validate-with procedure is placed on each control that uses validation. The validator is the only required argument. This specifies the type of validation for the control to be valid, in our case a StringValidator.


A StringValidator ensures that a input value is not blank. We have also added keyword arguements to enforce size limits (min-chars and max-chars).

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}
{applet manifest = "manifest.mcurl",
{compiler-directives careful? = true}
}

{value
let full-name:TextField =
{TextField
width = 3cm,
{validate-with
{StringValidator min-chars = 3, max-chars = 25},
required?=true
}
}

{HBox "Name:", full-name}
}

The procedure validate-with requests validation on the control. In our case, a TextField. A ValueChanged or ValueFinished event on the control triggers the validation cycle. Note that if you do not specify min-chars and min-chars, then any length String is acceptable.


Let's add a MessageDisplay to the validation. A MessageDisplay is graphical object used to display validation messages to the user. In the following example, the first control uses the default message created by Curl. We have also added a user-age input that validates using a NumericValidator that displays a custom message.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}
{applet manifest = "manifest.mcurl",
{compiler-directives careful? = true}
}

{value
let name-feedback:MessageDisplay = {MessageDisplay}
let age-feedback:MessageDisplay = {MessageDisplay}
let full-name:TextField =
{TextField
width = 3cm,
message-display = name-feedback,
{validate-with
{StringValidator min-chars = 3, max-chars = 25},
required? = true
}
}

let user-age:TextField =
{TextField
width = 3cm,
message-display = age-feedback,
{validate-with
{NumericValidator min-allowable = 18, max-allowable = 40},
required? = true,
message = "Users must be between 18 and 40"
}
}

{Table
columns = 3,
"Name:", full-name,name-feedback,
"Age: ", user-age, age-feedback
}
}

The MessageDisplay object needs to be created in order to hold the message. The MessageDisplay is referenced in each control, for example:

Code:

message-display = neme-feedback

Since each control object has its own MessageDisplay, if the user inputs an invalid value, then the associated message will display to the right of the control until the input becomes valid. A message will also appear if the user does not input a value for the user-age since required? = true is specified.


Now, let's place additional controls that target common types of entries such as phone number, email, and zip code. In these cases, we can specify a ValidationPattern. For example {validate-with ValidationPattern.us-zip-code} is used to validate a us zip code. Other patterns include credit cards, http-urls, social security numbers, as well as patterns for French, German, Japanese, and Chinese entries. Please see ValidationPattern for more information.



If you run a validation of the user’s form input before the form is submitted, there will be no wait time and redundant load on the server. Invalid inputs are already filtered out when input is passed to the server-based program. It also allows to simplify server-based program. In Curl, data can be validated in real-time, as the user enters information into the form.


Our example is a simple registration page that will validate the entries on the client machine (without the need to query the server). If an entry requires a specific input that has not been entered, a validation message will be displayed to the user. Once all valid information has been input into the dialog, the Enter button will be enabled. When the user clicks the Enter button, it will display the input information in a popup dialog.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}
{applet manifest = "manifest.mcurl",
{compiler-directives careful? = true}
}

{value
let feedback:MessageDisplay = {MessageDisplay}
let full-name:TextField =
{TextField
width = 8cm,
message-display = feedback,
{validate-with {StringValidator min-chars = 3, max-chars = 25}, required?=true}
}

let user-age:TextField =
{TextField
width = 1cm,
message-display = feedback,
{validate-with {NumericValidator min-allowable = 18, max-allowable = 40}, required? = true, message = "Users must be between 18 and 40"}
}

let address1:TextField =
{TextField
width = 8cm,
message-display = feedback,
{validate-with {StringValidator min-chars = 3}}
}
let address2:TextField =
{TextField
width = 8cm,
message-display = feedback,
{validate-with {StringValidator min-chars = 3}}
}

let zip-code:TextField =
{TextField
width = 3cm,
message-display = feedback,
{validate-with ValidationPattern.us-zip-code}
}

let home-phone:TextField =
{TextField
width = 5cm,
message-display = feedback,
{validate-with ValidationPattern.us-phone-number, required?=true}
}

let email-address:TextField =
{TextField
width = 5cm,
message-display = feedback,
{validate-with ValidationPattern.email-address, required? = true}
}

let enter-button:CommandButton =
{CommandButton
label = "Enter",
{on Action do
{popup-message
{VBox
"You entered:",
full-name.value,
address1.value,
address2.value,
zip-code.value,
home-phone.value,
email-address.value,
user-age.value
}
}
}
}


{Table
columns = 2,
"Name:", full-name,
"Address: ", address1,
"City, State: ", address2,
"Zipcode: ", zip-code,
"Phone: ", home-phone,
"Email: ", email-address,
"Age: ", user-age,
enter-button, feedback
}
}

In the previous example, we also:

•Created an Enter button to display the input values.

•Used the same MessageDisplay for each control. The feedback will be displayed to the right of the Enter button.



While it is possible to use validation on individual controls, the system is most often used to validate controls grouped in a Dialog (including subclasses such as RecordForm or HttpForm). The validation cycle starts when an entry is changed and ends when all necessary feedback has been shown. This also allows us to enable the Enter button when the Dialog is valid.


Note that the Dialog has the following validation entries:

Code:

message-display = feedback,
{validate-with {DialogValidator}},

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}
{applet manifest = "manifest.mcurl",
{compiler-directives careful? = true}
}

{value
let feedback:MessageDisplay = {MessageDisplay}
let full-name:TextField =
{TextField
width = 8cm,

{validate-with {StringValidator min-chars = 3, max-chars = 25}, required?=true}
}

let user-age:TextField =
{TextField
width = 1cm,

{validate-with {NumericValidator min-allowable = 18, max-allowable = 40}, required? = true, message = "Users must be between 18 and 40"}
}

let address1:TextField =
{TextField
width = 8cm,

{validate-with {StringValidator min-chars = 3}}
}
let address2:TextField =
{TextField
width = 8cm,

{validate-with {StringValidator min-chars = 3}}
}

let zip-code:TextField =
{TextField
width = 3cm,

{validate-with ValidationPattern.us-zip-code}
}

let home-phone:TextField =
{TextField
width = 5cm,

{validate-with ValidationPattern.us-phone-number, required?=true}
}

let email-address:TextField =
{TextField
width = 5cm,

{validate-with ValidationPattern.email-address, required? = true}
}

let enter-button:CommandButton =
{CommandButton
label = "Enter",
name = "e-button",
{on Action do
{popup-message
{VBox
"You entered:",
full-name.value,
address1.value,
address2.value,
zip-code.value,
home-phone.value,
email-address.value,
user-age.value
}
}
}
}

{Dialog
{Table
columns = 2,
"Name:", full-name,
"Address: ", address1,
"City, State: ", address2,
"Zipcode: ", zip-code,
"Phone: ", home-phone,
"Email: ", email-address,
"Age: ", user-age,
enter-button, feedback
},
message-display = feedback,
{validate-with {DialogValidator}},
{on vc:ValidationComplete at d:Dialog do
set {d.get-by-name "e-button"}.enabled? = d.valid?
}
}
}

In summary, form validation is the first step for allowing users to easily input form values. In our example, we presented the input values using a popup-message. If you wish to submit the valid information to a server for processing, please see the Curl Developer's Guide for more information.