Client-side validation / error tooltip

I’m writing a TextField with client-side validation. I extended TextField and VTextField, and wrote a simple validator in server-side. Up here everything works fine. My problem arises when I want to show a tooltip with validators error messages, I need to show the error tooltip with the same style of the original TextField, and this must be done on the client-side. I don’t know how do this.
Below is the code for my component

My server-side component

public class TextFieldAlain extends TextField  {
	public void paintContent(PaintTarget target) throws PaintException {


	public void changeVariables(Object source, Map<String, Object> variables) {
        if (variables.containsKey("repaint")) {

My client-side widget

public class VTextFieldAlain extends VTextField implements Paintable,
		MouseOverHandler, MouseOutHandler {

	/** Set the CSS class name to allow styling. */
	public static final String CLASSNAME = "v-textfieldalain";
	/** The client side widget identifier */
	protected String paintableId;
	/** Reference to the server connection object. */
	protected ApplicationConnection client;
	private Element errorIndicatordiv;
	private Element errorIndicatorDivOne;
	private Element errorIndicatorCaptionDivOne;

	public VTextFieldAlain() {

		addKeyPressHandler(new KeyPressHandler() {

			public void onKeyPress(KeyPressEvent event) {

	public void validate() {
		Scheduler.get().scheduleDeferred(new Command() {

			// my very basic validation...
			public void execute() {
				String v = getText();
				if ((v == null) || (!v.equals("alain"))) {
				} else {



	private void showError() {
		// show the error indicator
//		addStyleName("v-textfieldalain-error");
		if (errorIndicatordiv == null) {
			errorIndicatordiv = DOM.createDiv();
			DOM.setElementProperty(errorIndicatordiv, "className", "v-caption");
					"float: left; width: 13px; margin-left: 0px");

			errorIndicatorDivOne = DOM.createDiv();
			DOM.setElementProperty(errorIndicatorDivOne, "className",

			errorIndicatorCaptionDivOne = DOM.createDiv();
					"className", "v-caption-clearelem");
		DOM.insertChild((Element) getElement().getParentElement()
				.getParentElement(), errorIndicatordiv, 2);
		DOM.insertChild(errorIndicatordiv, errorIndicatorDivOne, 0);
		DOM.insertChild(errorIndicatordiv, errorIndicatorCaptionDivOne, 1);

		// Fix for IE6, IE7
		if (BrowserInfo.get().isIE()) {
			DOM.setInnerText(errorIndicatordiv, " ");


	private void clearError() {
		if (errorIndicatordiv != null) {
			DOM.removeChild((Element) getElement().getParentElement()
					.getParentElement(), errorIndicatordiv);
			errorIndicatordiv = null;

	public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
		// super.updateFromUIDL(uidl, client);


	public void onMouseOver(MouseOverEvent event) {
		// on mouse over...
		// show the tooltip with validators messages?

	public void onMouseOut(MouseOutEvent event) {
		// on mouse out...
		// hide the tooltip?

Any help you can give me to do this will be much appreciated. I am writing my thesis, and a part of it is to develop an extension of vaadin to allow validation of user inputs based on metadata information, and this validation should be performed on the client side.
Sory for my English.
Thank you very much in advance.

Hi there and welcome to the forum.

First of, you should really call super.changeVariables(…) in your ChangeVariables class. In fact, if you’re not doing any changes on the server side, I would remove all methods and just have a empty class extending TextField along with the @ClientWidget annotation. But probably you want to pass data about the validator from the server to the client so you need them at some point.

About every component in Vaadin has an caption. The error message is also shown within the caption(the little red “!” next to it). You should therefore have a look at com.vaadin.terminal.gwt.client.VCaption.updateCaption(UIDL) to see how it handles showing the error message and mimic that. There is a “if (showError) {” -row in there that starts the visual handling of error messages, row 183 in the version that I’m using.

I hope that points you in the right direction, ask more if you come up with some specifics.

Thank you for you answer Jens, It’s working now. I extended VTooltip and VErrorMessage to avoid the client-server comunication, it’s not an elegant solution but at the moment is enough for me.
Again, thanks.

Hi, can you write some more details how you managed to change VTooltip to your own custom Tooltip and how you have connected it with Your textfield?
Best regards