Form Validation using JavaScript - Lab Task 2

Post Updated On: June 1, 2020

Background

Quality of any software is strongly associated with how well it manages its data. A software is, broadly speaking, a data structure that faciliate user to search, view, input or update data according to some business processes. Its our responsibility as software engineers, to make sure only valid data is stored in persistent storage e.g. Hard Disk. The early we detect data validation issue, the better, so best place to validate data is exacly when its entered. (we should also validate data at backed to make sure our system do not store even a mistakenly sent invalid data).

You must have used input tag with type: radio, text, password and checkbox, etc. HTML 5 has provided some additional input types to be used to get valid data from user so that developers don't have to write custom JavaScript code for basic data types that applications usually store. There are two ways to validate data, either we should use HTML 5 input types. For example, if input type is url, email or date, then its required to enter URL, an email address that is syntactically correct and a valid date. Otherwise, browser would generate an error. See Mozilla and W3Schools for more such types and details of what I am talking about.

Second way to validate data is by writing custom JavaScript code. We use this approach when built-in HTML 5 types are not sufficient for our requirement. For example you may need to make sure a certain number of digits, lower or upper case alphabets or some special characters are there in a password that user has chosen, built-in HTML 5 input types can't help here. In same way, if you need to make sure, user has entered valid phone number or a valid CNIC number, we have to write some custom JavaScript for it. 

Task Description

Make a user registration form using Bootstrap that shall take following as input:

1. Person name as text input field. It shall not contain anything except small and upper case letters or spaces.
2. Favorite color ... there is color type in HTML 5, you can use that
3. Blog URL ... use url type.
4. Age ... it must be between 15 to 70... use number type here with min and max attributes. 
5. Mobile Number ... use tel type, if it serve the purpose or write custom JavaScript code. Mobile number format must be 92xxxxxxxxxx i.e. 12 digits.
6. Password ... ensure it shall contain at least 2 small, 1 upper case, 2 digit and 2 special characters. You have to write custom JavaScipt code for this too.
7. Computer National Identify Card number. Its formate must be valid i.e. xxxxx-xxxxxxx-x i.e. 13 digits with dash at right place.

When user submit the form, it shall be submitted only if all input data as valid as per above described rules. Show in pop-up on JS console that input data is valid. In case of invalid, show error message on right side of input field. Please note, form should not be submitted if any field contain invalid data.

Help: You may find this, this and this link useful. Feel free to use JQuery or Core JavaScript.