Hello
I am currently building a login form using HTML/PHP/Codeigniter, and would like to add some visual effects, like for example, if a user enters the username, either a tick or a cross is added beside the field when the user moves to the "password" field for example, and the same applies to the password field also. The username and password are stored in the mysql table "users".
How can I get these visuals to work?
Cheers.
What.s the putpose of the tick?
It would act like a validator even before the form is submitted, so that the person entering the username or password already knows whether it's correctly entered or not, mostly for the password due to the chars being hidden
So you want the username to be checked when the username control loses focus (via Ajax)? You mentioned a login form not a registration form, so I'm assuming you did not mean regular validation (e.g. length / character set etc).
If you are not checking the DB for username match, I wonder about the purpose of the tick.
In fact the registration form will be present, but it will not be the user who will register himself, but an admin. Thus, am using the "tick" method in the login form first so that a user name is validated as well as the password before submission of the login.
So this is a registration gorm not a login form? Sorry confused.
Lol there will be both, but as a test doing the login one with some predefined entries in the DB since it's a first attempt with Codeigniter. Coming back to the "tick validation", what's the best way to proceed with this, given it will also be present in the registration form afterwards to check for existing usernames when the admin will register users...
Well depends on your validation routines. They will be different for both forms perhaps. Your login form may need an ajax check on existing usernames - not sure. Anyhow. Fix the validation to fire on blur from the username control. Usually this will give true or false. How you handle the tick display is down to js - probably. You can use hidden images to show or hide or use icon fonts etc. What code have you got so far?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.