Show notes
- 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.