1

What are the arguments, from the UX perspective, to clean or not to clean masked inputs?

Consider credit card validity:

_ _ / _ _

Partially filling that field makes no sense, the partial value has no business meaning, and might be technically difficult to handle, especially if you store it in the background as year and month.

1 _ / _ _ represents no year, and invalid month (since the 2nd character is unknown, it can't be converted into number)

The techs would like to clean up the partially filled masked inputs on blur, arguing that it's not only technical problematic, but such values look weird for the user, and it's exactly how a date control is working - either you fill the date fully, or you get nothing.

On the other side, it might be annoying to have full value reseted only because you've forgotten the last character, and it's inconsistent with behaviour for wrong inputs (like 15/20), which are accompanied with validation errors.

Which one is better from the UX perspective of an average web user?

Please notice that in our system, locking the user on the formular is not an option. The user must be able to leave formular in any moment and all changes that weren't refused by the control are persisted. So, for example, negative weight will be saved, but the user will be shown, that the data is not consistent. The only data that are not saved are the data that are refused by the inputs. For example, letters in the number fields or incomplete dates.

1
  • I'm not sure I fully understand this. Your users are adding incomplete data to fields. Are the masks in place while they're editing (not necessarily a good idea) or do they appear on blur? If it's the second, then surely on blur you validate the data and, if it's wrong, just return the user to the field in its unmasked state (focus) and throw out an error message to get them to correct it? Or am I missing something here? Feb 7, 2022 at 16:14

1 Answer 1

1

Don't reset the partial field on blur; put the field into an error state and call attention to it. Sometimes users have partial information and they want to finish the larger task (getting through the form) before coming back to it. An example would be when the user remembers the first few digits of a credit card number but needs to get up and grab the credit card to complete the field. Destroying the data they've already entered could cause annoyance. Your engineers should prevent the user from submitting the form until all error states are cleared.

3
  • I don't like modifying questions after they were posted, but the 2nd part of your answer is out of discussion, I've added details
    – user98223
    Feb 8, 2022 at 8:10
  • It's OK to modify questions here, thanks for the additional detail. What happens in the case where a user has entered a value that is validated by the input pattern, but is incorrect - are they not allowed to change it?
    – Izquierdo
    Feb 8, 2022 at 14:34
  • they are allowed to change invalid value any time, but some business actions are blocked as long as the data are not valid
    – user98223
    Feb 9, 2022 at 9:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.