Directory

← Back

CSValidation

Client-side validation of text fields

Author

Rating

Popularity

<100

The CSValidator component extension allows client-side validation of TextField, PasswordField, and TextArea components. The field value is validated after each key press without any client-server communication.

You have two options for validating the values: regular expressions and JavaScript. The JavaScript return value can also be used to create counters in text fields and areas. The library comes with special JavaScriptEditor and RegExpEditor components, which allow you to develop and test JavaScript and regular expression validators easily. The editors are also available in the demo.

The add-on is installed as a JAR, which includes the JavaDoc for the server-side API. You need to compile the widget set.

The version 0.5 and later support Vaadin 7, and come as a component extension, which you can attach to a text field with extend(). For Vaadin 6 compatibility, use version 0.4.x, which offers three components instead of an extension: CSValidatedTextField, CSValidatedPasswordField, and CSValidatedTextArea. The functionality is exactly the same.

The add-on should be considered as beta, as compatibility is not tested with IE, but it probably works.

Sample code

final TextField postcode = new TextField("Postal Code");

final CSValidator validator = new CSValidator();
validator.extend(postcode);
validator.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);
// Validate full name both on client- and server-side.
TextField fn = new TextField("Full Name");

// The regular expression for validation
String fn_regexp = "\\w+ \\w+";

// Validate the on client-side
final CSValidator validator = new CSValidator();
validator.extend(fn);
validator.setRegExp(fn_regexp);
validator.setErrorMessage("Full name must be the first name and the last name");

// Validate the on server-side using the same regular expression
fn.addValidator(new RegexpValidator(fn_regexp, "Invalid full name"));
fn.setRequired(true);
fn.setRequiredError("Full name is required");

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2010-01-22
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.0+
Vaadin 6.2+ in 0.2.2
Vaadin 6.3+ in 0.3.0
Vaadin 6.4+ in 0.3.4
Vaadin 6.5+ in 0.4.0
Vaadin 7.0+ in 0.5.0
Browser
Firefox

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online