[Isomorphic]

We provide a mode where the error is shown only as an icon, and hovering over this icon shows the error. By necessity the icon reduces the textbox slightly, but not very much, and the icon makes the error more visible than just color styling, which would be an accessibility violation as well (color blind users). This is the mode we recommend.

If you want to continue with your custom approach, MouseMoveEvent plus getEventItemInfo() allows you to get rid of your HTMLFlow at the appropriate time.

[harsha.galla]

Isomorphic,

We cannot show the icon. We tried to just show the error. We see the behavior where error significantly reduces the text box, please find the attached images.

But I'm not sure with the approach of MouseMoveEvents on forms, because when a form has multiple formitems with validations, to handle mouse-out of each of them will make it complex.

Also, as mentioned can you share how the showHover prompt works for the formItem. I can mimic the same here :)

Thanks.

[Isomorphic]

Your screenshots look like you have told the form to show error icons but just hacked something to make the icons disappear (like provided a bad image path). If you think this is a framework bug, please provide minimal, runnable code to reproduce.

Yes, if you want to actually hide the error icon and do something different which would not pass accessibility guidelines, this is not a use case we have tried to make easy, the code for this is going to be non-trivial to write, and this should be expected.

[harsha.galla]

Isomorphic,

We have not tweaked anything here. We have setShowErrorIcon(false) and then defined a FormItemErrorFormatter to attach the html to be shows as error.

Also, do you plan to provide mouse out for formitems in the near future?

Thanks.

[Isomorphic]

Once again, we need a minimal, runnable test case if you want this looked into as a possible framework issue.

No, we do not plan to provide mouseOut for FormItems in the near future.

[harsha.galla]

Isomorphic,

I will create a simple test case and share it with you.

Also when i place HTMLPane beside the textitem by writing itemHoverHandler I have the following issues:

1) When I use getPageLeft() + getWidth() on the formItem and position HTML Pane x-coordinate there, strangely I still see some gap between the textbox and the positioned htmlPane. Any idea on this spacing?

2) I do HTMLPane.bringToFront() to make the error message appear front when I need to validate a form present in a pop-up Window. But when formItem receives focus the htmlPane ( error-message) goes behind the pop-up window. I tried to set the z-index of HTMLPane to the maximum possible integer, but it doesn't solve the problem.

Thanks.

[harsha.galla]

Isomorphic,


Please find the code below:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.KeyCallback;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.FormItemErrorFormatter;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.validator.RegExpValidator;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BuiltInDS implements EntryPoint {
    private ListGrid groupsGrid;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new KeyCallback() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        VLayout vLayout = new VLayout();
        vLayout.setWidth(500);
        vLayout.setHeight(500);
        vLayout.setBorder("1px solid red");
        vLayout.setLeft(100);
        vLayout.setTop(100);

        final DynamicForm sampleForm = new DynamicForm();
        sampleForm.setWidth(110);
        sampleForm.setHeight(200);
        sampleForm.setShowErrorIcons(false);
        sampleForm.setShowInlineErrors(true);
        sampleForm.setBorder("1px solid blue");

        RegExpValidator validator = new RegExpValidator();
        validator.setExpression("^(([A-Z0-9]{3})+)(,([A-Z0-9]{3})+)*(,)*$");

        TextItem textBox = new TextItem();
        textBox.setRequired(true);
        textBox.setValidators(validator);
        textBox.setName("textBox");
        textBox.setShowTitle(false);
        textBox.setWidth(100);
        textBox.setColSpan("*");
        textBox.setShowErrorIcon(false);
        textBox.setShowErrorText(true);
        FormItemErrorFormatter errorFormatter = new FormItemErrorFormatter() {
            @Override
            public String getErrorHTML(String[] strings) {
                return "Validation error appears here";
            }
        };
        textBox.setErrorFormatter(errorFormatter);

        sampleForm.setFields(textBox);
        vLayout.addMember(sampleForm);
        IButton clickButton = new IButton("Click");
        clickButton.setWidth(100);
        clickButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                sampleForm.validate();
            }
        }) ;

        vLayout.addMember(clickButton);
        vLayout.draw();

    }


}

please find the attached images to see the behavior.

Thanks.

[Isomorphic]

This is configured to show the error text inline due to your call to setShowErrorText(true). By design and as documented, this shrinks the field.

[Isomorphic]

On the other issues:

1. use getPageRect() as previously instructed, not the combination of getPageLeft() and getWidth().

2. a Window will bring itself to front when clicked on. You can set a very high zIndex to avoid this causing the Window to pop above your hover (say, 1 million). If you literally set zIndex to MAX_INT, the browser probably ignored this value.

[harsha.galla]

Isomorphic,

Perfect, I implemented the custom validation error mechanism last week without any glitches.

Thanks for all the help.