CSIT128 JavaScript Form Validation - University of Wollongong in Dubai PDF

University of Wollongong in Dubai CSIT128 – Introduction to Web Technology JavaScript #4 2  Outline 1 JavaScript and Forms – Form Validation 3 Form validation... your form goes here.....

University of Wollongong in Dubai CSIT128 – Introduction to Web Technology JavaScript #4 2  Outline 1 JavaScript and Forms – Form Validation 3 Form validation... your form goes here... Use form attribute onSubmit to check input before form submission function validateForm() { if (... something wrong...) { return false; } return true; } When function returns false, form will not be submitted  Form validation Example 1: we want user to fill out the email, if email is not filled out then we will alert the user Email: Form validation Example 1: we want user to fill out the email, if email is not filled out then we will alert the user. function validateForm() { var email = document.getElementById("email").value; if (email == null || email == "") { alert("Email must be filled out"); return false; } return true; } Email: Form validation Example 2: What if user enter only whitespaces? The trim() method removes whitespace from both sides of a string. function validateForm() { var email = document.getElementById("email").value; if (email == null || email.trim() == "") { alert("Email must be filled out"); return false; } return true; } Email: … Form validation Example 3: If user didn’t fill out the email, we want to display an error message. We use a span element as a placeholder for the error message. Email: Form validation If user didn’t fill out the email, we want to display an error message. We use a span element as a placeholder for the error message. function validateForm() { var email = document.getElementById("email").value; if (email == null || email.trim() == "") { document.getElementById("emailError").innerHTML = "Email must be filled out"; return false; } return true; } … … Form validation We want the error message has the color red. #emailError{ color: red; }  Form validation Example 4: We want to have two input fields. One for email and another one for email confirmation. User has to fill in the same email for both input fields. Email: Email again: http://www.uow.edu.au/~dong/w3/example/js/validation4.html  Form validation function validateForm() { var email = document.getElementById("email").value; if (email == null || email.trim() == ""){ document.getElementById("emailError").innerHTML = "Email must be filled out"; return false; } var email2 = document.getElementById("email2").value; if (email2 == null || email2.trim() == ""){ document.getElementById("emailError2").innerHTML = "Email must be filled out"; return false; } if(email.trim() != email2.trim()){ document.getElementById("emailError2").innerHTML = "Email does not matched"; return false; } return true; } Form validation We want all the error messages have the color red. #emailError{ color: red; } #emailError2{ color: red; } Form validation Better solution: using class.emailMessage{ color: red; } Form validation Now suppose that user didn’t fill out the email and click Submit, there will be a red error message next to the first input field. Suppose that user fixed the error by filling out the first email, but leaving the second email field blank. When the user clicks Submit, we will see that the error message next to the first input field still shows. We don’t want this Form validation We will fix the javascript code function validateForm() { var email = document.getElementById("email").value; if (email == null || email.trim() == "") { document.getElementById("emailError").innerHTML = "Email must be filled out"; return false; }else{ document.getElementById("emailError").innerHTML = ""; }... Form validation We will fix the javascript code function validateForm() {... var email2 = document.getElementById("email2").value; if (email2 == null || email2.trim() == "") { document.getElementById("emailError2").innerHTML = "Email must be filled out"; return false; }else{ document.getElementById("emailError2").innerHTML = ""; }... Form validation Final touch: we want to remove all whitespaces in the two input fields before submit function validateForm() { var email = document.getElementById("email").value; if (email == null || email.trim() == "") { document.getElementById("emailError").innerHTML = "Email must be filled out"; return false; }else{ document.getElementById("emailError").innerHTML = ""; document.getElementById("email").value = email.trim(); }...  Form validation Final touch: we want to remove all whitespaces in the two input fields before submit. function validateForm() {... var email2 = document.getElementById("email2").value; if (email2 == null || email2.trim() == ""){ document.getElementById("emailError2").innerHTML = "Email must be filled out"; return false; }else{ document.getElementById("emailError2").innerHTML = ""; document.getElementById("email2").value = email2.trim(); }... Form validation Example 5: Ask user a simple math problem, only submit the form if user answers correctly function validateForm() {... var answer = prompt("What is 1+2 ?"); if(answer == null || answer != 3){ return false; }... Form validation Example 5: Ask user a simple math problem, only submit the form if user answers correctly Can we generate random function validateForm() { question?... var answer = prompt("What is 1+2 ?"); if(answer == null || answer != 3){ return false; }...  Form validation Math.random(): returns a random number between 0 (inclusive) and 1 (exclusive), for example,.753 Math.floor(x): returns the greatest integer below x for example, Math.floor(4.6) = 4 To get a random number between 0 and 9: Math.floor(Math.random() * 10);.753 * 10 = 7.53 Math.floor(7.53) = 7 To get a random number between 1 and 10: Math.floor(Math.random() * 10) + 1; Form validation Example 5: Ask user a simple math problem, only submit the form if user answers correctly Generate random question function validateForm() {... var x = Math.floor(Math.random() * 10) + 1; var y = Math.floor(Math.random() * 10) + 1; var correctAnswer = x + y; var answer = prompt("What is " + x + " + " + y + " ?"); if(answer == null || answer != correctAnswer){ return false; } }... Form validation - Example Form validation - Example  References 1. JavaScript Tutorial. https://www.w3schools.com/js/. Last Accessed 4 May 2024. 2. Sebesta, R.W., 2002. Programming the world wide web. Addison-Wesley Longman Publishing Co., Inc. 26 THANK YOU 27