In the past, web designers were forced by technology into web pages that looked like the “complaint” page below. After hitting the submit button, the web pages was validated by the server and the page refreshed with errors posted back as a list. The user had to interpret the error messages to figure out which field was in error, and then determine how to correct it. This could be a tedious and time consuming process.

complaint

However, with the advent of RIA and Ajax, web pages are now undergoing an evolution towards more interactive validations. Web forms are now providing immediate feedback on errors through java script techniques, leading to faster entry of information and a more pleasurable user experience.

WebClient make it straightforward to implement browser-side validations through the use of regular expressions, which are overtaking old style edit masks as the modern de-facto standard for validating data. With this style of validation, you can provide immediate feedback to the user on simple data entry errors, including complex data types like phone numbers and urls. Please see the picture below for an example of email address validation.

regexpscreen1

Using regular expressions in WebClient is simple, and can be accomplished in three steps:

First, create a custom WebClient control template, copying the code from WebEdit.ctrl.

webedit

Second, insert the regular expression into the control template

addlines1

Here are the lines in text so you can cut and paste:

regExp="w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*([,;]s*w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*)*"
invalidMessage="Invalid Email Address <BR>Example:joesmith@org.com"

Third, direct Plex to generate specific field validations on the appropriate panel field in the Plex model.

panelcontrolname1

Generate and build, and you are done. Here are some additional regular expressions for you. Many other regular expressions are available on the web, just google “regular expressions”

  • Phone number – ^(?:([2-9]d{2}) ?|[2-9]d{2}(?:-?| ?))[2-9]d{2}[- ]?d{4}$
  • 5 digit zip – ^d{5}$
  • 9 digit zip – ^d{5}([-]d{4})?$