jQuery

Update the code that validates a date in the Account Profile application. When done, the application must correctly validate dates like 2/30/2017 or 11/31/2017.

1. Open the HTML and JavaScript files and review.

2. Enter values for all the input fields on the form. For the Date of Birth field, enter the invalid date 11/31/1980, and click Save. Note that the application accepts this date as valid.

3. Change the Date of Birth to 13/31/1980, and click Save. Note that this time the application does not accept the date.

4. In the JavaScript file, note that the ready event handler contains an isDate() function and a handler for the click event of the Save button that contains the validation code.

5. In the isDate() function, remove the if statement that makes sure the value of the day variable isnt greater than 31. Replace it with an else statement that contains a switch statement that evaluates the value of the month variable.

6. Code a case label for the value 2 that returns false if the value of the day variable is greater than 28. Note that this wont handle leap years, but thats OK for this exercise. However, you are welcome to add validation code for leap years.

7. Code case labels for the values 4, 6, and 9 that fall through to the case label for 11. The code for case label 11 should return false if the value of day is greater than 30.

8. Finally, code a default case that returns false if the value of day is greater than 31 or less than 1.

9. Run the application and test it with the invalid dates from steps 2 and 3. The application should now correctly identify both of these dates as invalid.

Index.html

My Account Profile

E-Mail: Mobile phone: ZIP Code: Date of Birth:

profile.js

"use strict"; $(document).ready(function(){ var isDate = function(text) { if( ! /^[01]?\d\/[0-3]\d\/\d{4}$/.test(text) ) return false; var index1 = text.indexOf( "/" ); var index2 = text.indexOf( "/", index1 + 1 ); var month = parseInt( text.substring( 0, index1 ) ); var day = parseInt( text.substring( index1 + 1, index2 ) ); if( month < 1 || month > 12 ) { return false; } if( day > 31 ) { return false; } return true; }; $( "#save" ).click(function() { $("span").text(""); // clear any previous error messages var isValid = true; // initialize isValid flag var email = $("#email").val(); var phone = $("#phone").val(); var zip = $("#zip").val(); var dob = $("#dob").val(); if ( email === "" || !email.match(/^[\w\.\-]+@[\w\.\-]+\.[a-zA-Z]+$/) ) { isValid = false; $( "#email" ).next().text("Please enter a valid email."); } if ( phone === "" || !phone.match(/^\d{3}-\d{3}-\d{4}$/) ) { isValid = false; $( "#phone" ).next().text( "Please enter a phone number in NNN-NNN-NNNN format."); } if ( zip === "" || !zip.match(/^\d{5}(-\d{4})?$/) ) { isValid = false; $( "#zip" ).next().text("Please enter a valid zip code."); } if ( dob === "" || !isDate(dob) ) { isValid = false; $( "#dob" ).next().text( "Please enter a valid date in MM/DD/YYYY format."); } if ( isValid ) { // code that saves profile info goes here } $("#email").focus(); }); // set focus on initial load $("#email").focus(); });

profile.css

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: white; width: 850px; margin: 0 auto; border: 3px solid blue; padding: 0 2em 1em; } h1 { font-size: 150%; color: blue; margin-bottom: .5em; } h2 { font-size: 120%; margin-bottom: .25em; } label { float: left; width: 9em; } input, select { width: 15em; margin-bottom: 1em; } span { color: red; }