PRDV402: Introduction to JavaScript II

Form validation 1

In this exercise, we are providing you with a simple support query form, and we want you to add some validation features to it:

• Make all of the input fields mandatory to complete before the form can be submitted.
• Change the type of the "Email address" and "Phone number" fields to make the browser apply more specific validation suitable for the requested data.
• Give the "User name" field a required length of between 5 and 20 characters, 
• Give the "Phone number" field a maximum length of 15 characters 
• Give the "Comment" field a maximum length of 200 characters.

Try submitting your form - it should refuse to submit until the above constraints are followed and give suitable error messages. To help, you might add some simple CSS to show when a form field is valid or invalid.

Download the starting point for this task to work in your own editor or an online editor. 

If you need help completing it successfully, download the solution code.

Form validation 2

Our final task provides you with a simple email address entry input. We would like you to use the Constraint Validation API, plus some form validation attributes, to program some custom error messages.

• Make the input mandatory to fill in, and give it a minimum length of 10 characters.
• Add an event listener that checks whether the inputted value is an email address and whether it is long enough. 
• Provide the user with an appropriate custom error message if it doesn't look like an email address or is too short.

Download the starting point for this task to work in your own editor or an online editor.  

If you need help completing it successfully, download the solution code.

Source: Mozilla, https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.