TextArea instant validation

Hi all,

We are using TextAreas in our Forms.

When a user enters data in the text area it sends TextChangeEvents which include in the event data the text of the source, however the source’s actual ‘value’ does not change. This means subsequent calls to isValid() from the Form which contains the fields does not get the updated data (as it checks validity of the fields using getValue()) and therefore isValid() returns false, even though the current data is actually valid.

I changed the TextChangeEventMode to EAGER that just results in the text event being sent for every key press, no actual value change occurs (until focus exits the field or enter is pressed).

I tried a hack / work-around where I applied the value on TextChangeEvent using setValue, which worked for the most part, however when the user presses enter the text change event occurs and sets the text content (splatting the users enter key press newline addition), resulting in a workflow where they have to press enter twice (yuk).

If I register a ValueChangeListener the value change only occurs on enter key press and loss of focus, however I need to be able to have the value change truly take affect more frequently, ideally in a lazy timer based fashion like TextChangeEventMode.LAZY

The behaviour that I want is similar to the Javascript project live-validation (http://livevalidation.com/documentation)

I have seen both of these:
https://vaadin.com/forum/-/message_boards/view_message/588208
https://vaadin.com/forum/-/message_boards/view_message/564617

Yes, text change events do not set the value of the TextField/-Area, so you can’t use isValid(). You can run validators separately from a field without setting field value (instantiate new ones or get them from the field with getValidators()), so that shouldn’t be a huge problem.

If you want more “instant” validation, you could consider
Client-Side Validation
.

We have a form structure which has sub forms as the various tab panes. The save button belongs to the top level form, and the fields on the sub forms affect the top level save button’s enabled state

So each Form object has many fields, some of which have validators; we have write-through disabled.

My intention was to check the sub forms validity from the top level view in the following fashion (rough example code):

boolean isValid() {
return subForm1.isValid() && subForm2.isValid();
}

boolean hasModificiations() {
return subForm1.isModified() && subForm2.isModified();
}

The benefit of this approach is that we can defer the validity and dirty state to each sub form and use the abstractions Vaadin provides out of the box (we use item data source/binding). However, because the value of the text areas don’t change we can’t really do this, because all of the subForm.isValid() calls fail (due to the value not being updated).

If I check the valid state against the validators specifically in the listener they will pass (as per one of the forum links above), but the checks at the Form level will still fail, which means the code for actually performing these checks is going to be extremely coupled (poor separation of concerns) and difficult to maintain. I would no longer be able to know the current valid state of the entire form (by checking subforms). The listener can tell me that a field is valid, but it is then MUCH harder to know if the entire form (including that field) is valid :frowning:

Thanks for the feedback, I’m just trying to determine if there is something I’ve missed as this seemed much harder than I thought it should be initially.

edit: We have a client requirement to use IE7 (only supported browser), unfortunately the suggested extension does not support IE7 :frowning:

Ok. Well, I guess your options are to either iterate through the forms and their fields and validators, or use some custom validation mechanism. Running a huge number of validators for each keypress sounds a bit heavy. Well, not an issue if you don’t have many users, but. For example, you could make some sort of “validation registry” in the top-level form, where each text change listener sets if the field is valid after modification, and when all are OK, the “OK” button is enabled.

Did you try the CSValidation demo with IE7? It hasn’t been tested with IE7, and I don’t have one, but it might work. Nevertheless, it wouldn’t work for your purpose, as the component doesn’t communicate changes in the validation result to the server, nor can it easily enable/disable other components in the UI. Well, in theory you could write a JavaScript validator that collects the validation result from all such fields and then communicates the result to the server-side…somehow. (Just remember to validate also on the server-side.)

You could also take a look at the add-on
Snappy
which might enable doing more things based on client side validation.
It might not fulfill your other needs, though.

Thanks for the responses guys, I will have to give both the plugins a download and see if they are appropriate as part of my rework.

Priorities have pushed me off this issue, I will post back later this week or early next week once I get a chance to address it further on my side.

OK, so after looking at the various implementations in code I decided to have the save button permanently enabled and simply show a warning notification if the content is invalid, returning the user to the form.

It is working nicely, and whilst it isn’t as I typically would have it in a rich application; I don’t feel like it is a huge compromise. Thanks for the feedback.