We have a Perspective view with a form our users fill out and a save button at the bottom. Some of the text values are sensitive to bad input, so we have grooming functions which fix inconsistencies and flag whether the input is usable or not. Right now the grooming is triggered by an onChange script on each text property, and the text field component is set to deferUpdates=true since the grooming function can’t handle partial input.
This more or less works: you click on a text box, type in something, then click outside the box to trigger the grooming. The text box updates with a “cleaned” version, and the SAVE button is enabled/disabled and the text box highlighted red based on whether it is usable.
The issue is that if you update one of the text boxes and then go directly to the save button without removing focus off the text box, things misbehave. You can hit save if the previously groomed input was valid even if the updated value isn’t, and you can’t (directly) hit save if the previously groomed input was invalid even if the updated value is. In the latter case, clicking on the disabled SAVE button will remove focus from the text field, trigger the grooming, and enable the SAVE button, but seeing a disabled button and requiring two clicks is poor UX.
Are there any UX gurus out there who know Perspective and can suggest a way to make this form better?
I like how the form updates with the grooming results as users work through it, but I need to ensure the final changes have been groomed before actually saving. If my grooming functions could handle character-by-character input, I would just set deferUpdates=false on the text field components, but they can’t. 