FO-1 Custom validation of the CV application

Revisit and refactor the DOM-9.cv application by adding validation to the form before submitting it. The requirements of the exercise are:

1. Give the user the chance to reset his CV any time he wants by adding a second button of reset type next to submit button.

2. The first input (of type text, regarding the name) should be a required input. Any time the user releases a key on his keyboard, the field should be validated, and if it is empty, then a custom error message should be put into the paragraph below the input field, with a text of 'Were you born without a name?'. This happens on 'invalid' event of the field, don't forget to prevent the default behavior before doing anything else, and to restore the customValidity of the field back to an empty string.

3. Regarding the date of birth input, the user must have been born before the 14 November 2000. So we are sure that he is already an adult (feel free to change this date to your current date). If the user has been born after, the custom error message should appear on the paragraph below the input field 'Go and drink your milk kiddy'. This field should be validated anytime we have value change.

4. Last but not least, the textarea should be of 140 characters long (twitter style). The validation should happen again on keyup and the user should be always aware about how many characters have left for his message.

Hint: Use the invalid pseudo selectors in css to hide or show the paragraphs that will hold the custom error messages.

All in all the final result should like this

Note: The image may not appear because the app is hosted through netlify. But it should appear on your local server in your PC.

Nächster

Vorher

Course's Objectives

Beschreibung