Error Input Field Lacks Border and Incorrect Icon Position

[dhinesh-kumar-m]

Summary

When an error occurs in the password input field, the error state is not visually distinct because the input field does not have a red border. Additionally, the error icon appears to be incorrectly positioned. This makes it difficult for users to identify the input field error visually.

Steps to Reproduce

• Navigate to the sigin form of preline link.
• Remove hidden classes in the password input.
• Observe the error state for the input field.

Demo Link

https://preline.co/examples/forms-authentication.html#signin

Expected Behavior

• The input field should have a red border to indicate an error state.
• The error icon should be correctly aligned within the input field.

Actual Behavior

• The input field does not have a red border when an error occurs.
• The error icon is misaligned and does not properly display within the input field.

Screenshots

[oliverhaas]

I guess one could argue that the example is wrong, but this is not really a bug in the library.

Just add proper alignment and border classes. Depending on how you render your html and do your validation, this can vary quite a bit.

Or am I missing something?

[jahaganiev]

@dhinesh-kumar-m As Oliver mentioned, this issue has nothing to do with Examples.

You may check validation state styles here and apply them where needed.

Hope that helps!