creativetimofficial/ct-now-ui-dashboard-pro

Form Validation doesn't validate as you type the first time you use a text box

Closed this issue · 3 comments

Steps to reproduce
Go the the live preview at https://demos.creative-tim.com/now-ui-dashboard-pro/examples/forms/validation.html
On the register form demo card click into the email textbox.
Enter a valid email address such as bob@gmail.com - notice that when you first click in the box is outlined in red. Even after you type the full email address it is still outlined in red. Press tab to move to the next field and the red outline goes away as expected.

Now click back into the email textbox, delete all text, and enter the email address again, now notice this time as soon as you enter just bob@gm the outline becomes green.

The first time you enter the text box and enter bob@gm it does not outline in green once text is valid. This can be confusing to the user the first time they enter a value as once the value complies the outline does not change but remains red until you leave the field, appearing as though the value is not valid.

Hi, @rubixxcube! Thank you for using our products. We've tested and from our part when we type for the first time the email even after we type the full email address it is still outlined in green not red, anyway if this it's an issue we have to make an update to the plugin in the next update of the product, but as I said in our side everything it's working fine.

Regards,
Dragos

Hey @dragosct10 thanks for responding so fast. There was some confusion on my part and I found the source of it. You are correct, the template is functioning as expected, sorry for the false alarm.

Here is what the confusion stems from. When you click into a textbox (regardless if there is validation or not), the default behavior is to outline the textbox in red.
You can see this on any form in the template, example go to https://demos.creative-tim.com/now-ui-dashboard-pro/examples/forms/regular.html and click in a field and you will see it outlines in red. The red outline made me think this was a validation thing, when in reality it is just the highlight color the template has chosen. Can you tell me how i can change the input highlight color to a different color?

Hi, @rubixxcube! You can go in assets/scss/now-ui-dashboard/_inputs.scss and search for these lines of code:

screenshot 2019-01-08 at 11 31 57

There you can change the variable $primary-color with what color do you want.

Regards,
Dragos