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

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.

Step-by-step 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();

}

});

}