Question

Fill the validateForm function to check that the phone number contains a number (use the isNaN function) and that the user name is less than 11 characters long. Display "Phone number is invalid" and/or "User name is invalid" in the console log if the check does not pass. Use the preventDefault function to avoid submitting the form when the inputs are invalid.

Answer 1

Answer:

Hi there! This question is asking to write a Javascript validation function to validate user input. Assuming the input fields have the id set as “phone_number” for the phone input, and “user_name” for the User’s name, we can write the function below to do the validation as required.

Explanation:

function validateForm() {

   if isNaN(document.getElementById(“phone_number”).value) {

       document.getElementById(“phone_number”).addClass(“error”)

       console.log(“Phone number is invalid”)

   }

   if document.getElementById(“user_name”).length < 11 {

       document.getElementById(“user_name”).addClass(“error”)

       console.log(“User name is invalid”)

   }

   document.getElementById(“submit”).addEventListener(“click”, function(e) {  

       if document.getElementById(“phone_number”).hasClass("error") || document.getElementById(“user_name”).hasClass(“error”)  {

           e.preventDefault();  

       }

   });

}