ASU Form Validation Using Events Event Handlers and Event Listeners Exercise

Requirements:

• Use an external CSS & JS file, no internal or inline styles & scripts
  • Please comment your JS to demonstrate your understanding of what is happening
• Create a form with at least 2 inputs and a submit button
  • A good example would be First Name, Last Name, and Age.
• Use JS to provide the user with some feedback on the values they enter or choose with your inputs
• To do this you will need create a function that has an event listener on each of your inputs
  • The Event listener should call a function that evaluates the inputs value(what the user inputs)
    • HINT use this.value as it will refer to the triggering element (the input)
  • This function should take the value and use a conditional statement(if/else or switch) and provide the user with a message depending on thevalue. This message can appear anywhere in proximity of the form. Inmost form it happens below the input that triggered the feedback. Thefeedback can be silly, but should relate to the input value in anobvious way.
    • SUPER HINT: The JavaScript Book website has great examples of eventhandlers and listeners within a form. I have taken an example and addedit below for reference as well. Check it out to make this assignmenteasier: http://javascriptbook.com/code/c06/ (Links to an external site.)
• Style your page
  • Font, color, spacing and layout should be intentional and not default for all other elements on the page
  • Use classes for styling
  • As always no CSS frameworks all custom creations from your original self
• Confirm that the code is properly indented & formatted.
• Validate your code, there should be no errors
• Save your files on your system in a folder called HW6Part2
• Upload your folder and files to your ASU web space
• Submit your assignment using a link from your web host

Example and screenshot below:

function checkUsername() {                             // Declare function  var elMsg = document.getElementById('feedback');     // Get feedback element  if (this.value.length < 5) {                         // If username too short    elMsg.textContent = 'Username must be 5 characters or more'; // Set msg  } else {                                             // Otherwise    elMsg.textContent = '';                            // Clear msg  }}var elUsername = document.getElementById('username');  // Get username input// When it loses focus call checkUsername()elUsername.addEventListener('blur', checkUsername, false);

Point Distribution:

1. Form with at least two validated inputs= 10pts
2. User feedback methodology – Let the user know what to input/what is wrong = 10pts
3. Use of Event Listener = 10pts
4. Use of Conditional Statement = 10pts
5. Content, look and feel of site. Site should look neat and clean. 10pts