What is the best way to show Promo Code validation?

Question

I'm working on a promo code entry field and want to give feedback to the user for both a valid and invalid entry. I want to show feedback near the input but does having the icons inside of the field present an issue?

-Promo codes are fixed length (5-9 characters)

Answer 1

I'd be careful, specifically with the "×" in the input field. Some users may be familiar with input fields that contain a "×" to clear the input.

For example, some browsers interpret a standard <input type="search"/> as a field with a "×" to clear the input.

_{Seen here in Chrome:}

I agree that the aesthetics are nice, but I think it could look just as nice outside, perhaps before your error message?

ⓧ The promo code you entered is invalid. Please try again.

Alternatively, you could actually wire up the "ⓧ" to clear the input, and viola, solved that problem.

Answer 2

I've seen it done both ways before but it usually depends if its on mobile or desktop (you are not specifying which one it is)

Here you can find a topic debating something similar: Inline validation icon usability

Here you can find a research regarding the same topic: http://alistapart.com/article/inline-validation-in-web-forms

I do see some minor changes you might want to consider (though they are not on the scope of your question)

1. Make sure the field text is of similar width to the expected input. (I think you've done this to certain degree, just making sure it was not just because of a quick mockup)
2. Denote the cupon is an optional field in case it is
3. The placeholder text could show an example cupon instead of "Optional promo code"
4. Give users the option to remove the cupon once they added it. Sometimes you just don't see the point of using it after seeing the discount!