Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 9 ■ Data ValiDation teChniques
form.addEventListener("submit", function(event){
if(email1.validity.valid && email2.validity.valid && email1.value && email2.value){
resultDiv.innerHTML = "Email is valid and they match";
}else{
resultDiv.innerHTML = "Email is not valid or they do not match";
}
event.preventDefault();
}, false);
}
document.addEventListener("DomContentLoaded", addInteractedClass, false);
Showing a List of Erroneous Fields
This method shows the user a list of fields that contain errors. (See Figure 9-4.) In addition to adding a border to
visualize if the field is valid, you will loop through the form fields to generate a list of all the invalid fields.
Figure 9-4. Showing a list of erroneous fields
Once the page loads, you add an event listener to the form. When the form is about to submit the data, you stop
the form and call the checkInputs function.
The checkInputs function first looks at a div called resultsDiv, where you give the user feedback and empty out
any nodes that are in that div. Then it loops though all the input tags and checks for the valid property of each tag.
If the tag is not valid, it then grabs the ID, asks for the properly-formatted name through the reformatName
function, and continues to create a paragraph node with text indicating the name of the field is invalid and adds this
new node to the resultsDiv.
showInvalidFields.html (excerpts)
function formCheck(){
var form = document.getElementById("userForm");
form.addEventListener("submit", function(event){
www.it-ebooks.info
291