Attached keyboard event listener ‘keyup’ to username field - so this is the 'target' of the listener. So whenever a key is pressed on the keyboard, the event fires and my callback function runs which takes in the keyboard event object.
Then used the test() method to compare the value property of the keyboard event object with the regex pattern to see if it passed the test and validated.
Wrote a cople of CSS classes (success and error) to make the border of the username field red or green.
Then wrote an IF statement within the callback function to apply the green ‘success’ border to the username field if a valid username is entered and red ‘error’ border if not. This was done with the setAttributre method which overrides the class attribute as appropriate.
View all episodes
