I know some others have done client-side validation of text fields as well, but I haven’t seen anything published in the Incubator. It wasn’t too hard to do, so here it is.
The
CSValidationTextField
(suggestions for a better name are welcome) is an extension of the regular
TextField
. It can validate the input with a regular expression and/or a JavaScript program.
Of course, you can’t trust the client-side code for validation,so you need to validate the input on the server-side as well. For regular expression validation, you can use the same expression for the server-side
RegexpValidator
. For example:
// The Finnish Social Security Number
final CSValidatedTextField ssn = new CSValidatedTextField("SSN");
String ssn_regexp = "[0-9]
{6}[+-A]
[0-9]
{3}[0-9a-zA-Z]
";
// The client-side validation
ssn.setRegExp(ssn_regexp, "000000-000A");
ssn.setAllowInvalid(false); // Prevent typing invalid values
// The server-side validation
ssn.addValidator(new RegexpValidator(ssn_regexp, "Invalid SSN"));
ssn.setRequired(true);
ssn.setRequiredError("SSN is required");
form.addField("ssn", ssn);Matching partially filled values has some problems currently. If you disallow typing invalid input, as in the example above, the regexp validation currently needs an “example” and is restricted to only fixed-length fields. I’ll have to look if the JS regexp matching can somehow report if there’s a partial match. If you allow invalid input, there are no restrictions and the fixed-length example is not needed.
You can validate with JavaScript just as easily:
CSValidatedTextField postcode = new CSValidatedTextField("Postal Code");
postcode.setJavaScript("if (value >= 0 && value < 10000)" +
" \"partial\";" +
"else if (value >= 10000 && value <= 99999)" +
" null;" +
"else" +
" \"Postal Code must be a 5-digit number between 10000 and 99999\";");
layout.addComponent(postcode);The server-side validation needs separate Java code though, unless you use some JavaScript execution library.
You just
need
to validate the input on the server-side as well, as the client-side validation does not actually prevent inputting invalid values (unless you set setAllowInvalid(false), but that’s a bit restricted at the moment).
Password input is handled with a separate
CSValidatedPasswordField
and multi-row text input with
CSValidatedTextArea
.
See the example source codes (link below) for more examples.
See:
[list]
[]
The Demo (editors, some validation examples)
[]
API Documentation
[]
Source Repository
[]
Example Souce Code
[/list]Included are also handy interactive editors for the regular expressions and JavaScript validators, as you can see in the demos.
Update 15.4.2011:
Changed the thread title and mentioned -TextArea and -PasswordField.
…and succeeded.