How to improve UX when grooming user input on a form?

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. :frowning:

Why not ?

Quick solution: You could add a check form button that will perform the grooming and enable the save button. Disable it again after it’s been clicked.
It’s less fancy but should fix the issue.

Or perform the grooming like you already do, on input change, and use the check form button to enable the save button. And disable it again when it’s clicked. Still requires two clicks, but in this case the user knows why.

Warning: I know nothing about UX.

Some of the grooming rules only make sense on the final input like allowing whitespace or punctuation in the middle but stripping them from the head/tail.

I’m playing with the behavior of the save button right now, and it appears that the focus event (onChange grooming) always happens before the button event. If I knew that was guaranteed, I could leave the SAVE button always enabled and have the button event give a popup if the input was unusable… Not quite as nice but not awful.