How do I handle wrong input in a multiple input field?

Question

The user has to input a 'serial' that can be verified in a database. The user can enter 1 to n 'serials'. Serials can be good or bad.

For those following case, I do:

• Case 1: Do the process on good serial, let only the bad serials.
• Case 2: Input invalid no process.
• Case 3: Clear the textbox, all process done.

^{download bmml source – Wireframes created with Balsamiq Mockups}

User can observe immediately the rest of the process so they know if it works or not. But finding the serial that failed in a list even a short one can be hard. As they can look like the same. The user enters 1 to 10 serial in a row. The average number is 4.

Color can not be use in the text box as textbox is rendered as HTML <input> element on the page.

Input can be validated on key strokes, but it will be time-consuming as checking for a like on 3 million row will take more time than an equal test.

The input takes 20% of the display. So 80% of it is free for any error message.

Answer 1

I'm not sure what your tech stack is, but you could use an input that the Return key quickly turns it into a taglike pill.

Here's a bootstrap example showing this with accompanying code (It's a tiny bit buggy as you'll notice the input shifts to the left a very small amount, but it's a starting point):

Pro

• Users can make hard to read numeric strings into visually discrete units

• Ability to delete individual items

• Users can input w/o leaving the keyboard to press a button

Con

• Users may mistakenly think the system is entering them as 'tags' for categories vs individual items

re: users getting immediate feedback
If you have some area (not visible in your mock) that shows immediate feedback as you mentioned, perhaps you can position it just to the right so users can see quick visual indication that the serial # is incorrect, so they can quickly make adjustments. I don't see that in your mock, so I don't have a clear picture of your constraints for the UI.

Answer 2

Taking limitation into account: plain html input (no colors, no tokens) I would suggest to:

1. Increase field size from 20% to bigger value because user will not be able to see entire value of the input in edge cases;
2. If "on type" validation is acceptable when delimiter is detected then do a validation and show error message: "'incorrect_value' is invalid". Make sure to remove message if value is corrected.
3. If you can do some more javascript magic utilize setSelectionRange to highlight incorrect value.

In any case, do not remove incorrect parts of user input automatically because user will not notice it. User input is sacred even if it is incorrect from system point of view.

If plain html input can be overcame, then:

1. Consider replacing input field with multiline textarea for that 10 value in the row edge case;
2. Use more complex control which can tokenize the input. In this case the task is quite simple. In this case the task is much easier (assuming you can find correct implementation). Head to your email client and see how incorrect addresses are handled.