Javascript help displaying error message, submit and clear form, validate email. None of that is working for me.

• When the Send button is pressed, the form should be validated in JavaScript and report error messages if anything is wrong. The error messages must display dynamically in the page. See the examples below. Three error cases are shown below, but error messages and error handling must account for all possible combinations of errors. These are the form submission rules:

  • Name, Subject, and Message must be non-empty.

    • Emails must contain valid email addresses. You are given a function to validate email

      below. Use the function like any validate function. For example:

      if(!validEmail(email)) {/*handle error*/}

  • Emails must match.

  • If someone presses the Send button over and over with errors in the form, the errors will

    update properly and accurately.

  • If there are no errors, the form will clear and display Sent! in the message area. It will

    not actually be sent, we are just faking it.

• When the Clear button is pressed, it will clear the form and any messages displayed.

• Your form should do trimming on the values in the text boxes. If someone enters trailing or leading spaces, your JavaScript should strip these before validating. For example, John Smith should be trimmed to John Smith before validating. Also, if someone enters just spaces, this should be treated as empty input. Test this in the example form.

• You may not use any inline or embedded JavaScript. This means you may not use CSS in HTML like this style=width:100%; or JavaScript in HTML like this onclick=validate(). This means the following:

  • JavaScript onclick events (and anything similar) must be handled with event listeners/handlers

• All JavaScript variables must be declared with the var keyword.

• You must have at least the following JavaScript functions (you may make more, but not less).

  • function clear() : this will clear the form. You must use this with an event handler to clear the form using the Clear button. You may not use the HTML clear attribute in a clear button. Dont forget to clear error messages as well as the text boxes.

  • function validate() : This function will be called when you press the send button. It will validate the form. If the form is correct, it will return an empty string. If the form has an error, it will return the error messages to be displayed. This function is called with the send button event handler. You may not use a submit attribute in a submit button.

  • function validEmail(email) : You are given this function below. Do not modify it.

  • Two event handlers, one for the Send button, one for the Clear button.

index.html

Contact Me

First Name

Last Name

E-mail

Subject Title

Message: 0 of 1000 characters maximum

main.js

"use strict";

function clearForm() { /* * this function replaces the text in text boxes with empty strings * and replaces the message area with an html */ document.getElementById("first-name").value = ""; document.getElementById("last-name").value = ""; /* NOTE: This next line violates the division of concerns rule, but it's okay for this assigment. We will fix this later. */ document.getElementById("msg").innerHTML = " "; }

function validate() { var errorMessage = "";

//get all the elements into the function var fNameInput = document.getElementById("first-name"); var lNameInput = document.getElementById("last-name");

//get all the strings in the elements and trim them var fname = fNameInput.value.trim(); //removes white space, user experience var lname = lNameInput.value.trim();

//put the trimmed versions back into the form for good iser experience (UX) fNameInput.value = fname; //then puts it back into the form for user experience lNameInput.value = lname;

//test the strings from the form and store the error messages if (fname === "") { errorMessage += "First name cannot be empty. "; //if it is it sends message to user }

if (lname === "") { errorMessage += "Last name cannot be empty. "; }

//send the errors back or send an empty string if there is no error return errorMessage;

}

//get the button into a JS object var sendBtn = document.getElementById("contact-send");

//create an event listener and handler for the send button sendBtn.onclick = function () { //bring the message area in in-case we need it to report errors var msgArea = document.getElementById("msg"); //get the validation of the form var msg = validate(); //report errors or submit the form if (msg === "") { clearForm(); msgArea.innerHTML = "Sent!"; return true; } else { msgArea.innerHTML = msg; return false; } };

//get the button into a JS object var clearBtn = document.getElementById("contact-clear");

//create an event listener and handler for the clear button clearBtn.onclick = function () { //call clear if the button is pressed clearForm(); };

function validEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\ -0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); };