var fullName = document.querySelector("#fullName");
var birthday = document.querySelector("#birthday");
var genders = document.querySelectorAll(".gender");
var hobbies = document.querySelectorAll(".hobbies");
var email = document.querySelector("#email");
function showError(inputID, errorMessage) {
let parent = inputID.parentElement;
let formError = parent.querySelector(".form-error");
let formInput = parent.querySelector("input");
formError.classList.add("activeError"); // add class "activeError" into formError.
// formInput.classList.add("activeErrorOnInput"); // add class "activeError" into formError.
formError.innerText = errorMessage; // set message into formError.
}
function showSuccess(inputID) {
let parent = inputID.parentElement;
let formError = parent.querySelector(".form-error");
let formInput = parent.querySelector("input");
formError.classList.remove("activeError"); // add class "activeError" into formError.
// formInput.classList.remove("activeErrorOnInput"); // add class "activeError" into formError.
formError.innerText = ""; // set message into formError.
}
// 1. Check name
function checkNameValid(input) {
const fullName = input.value.trim();
let isNameValid = true;
if (fullName.length === 0) {
showError(input, "Full name can not be empty!!!");
return isNameValid;
} else if (fullName.length > 50) {
showError(input, "Full name must be less then 50 characters!!!");
return isNameValid;
} else {
showSuccess(input);
}
return isNameValid;
}
// 2. Check Email
function checkEmailValid(input) {
const regexEmail = /^\w+([\.-_]\w+)*@\w+([\.-_]\w+)*(\.\w{2,3})+$/;
input.value = input.value.trim();
var isEmailValid = regexEmail.test(input.value);
if (input.value.length === 0) {
showError(input, "Email can not be empty!!!");
} else if (!isEmailValid) {
showError(input, "Email is invalid format!!!");
} else {
showSuccess(input);
}
return isEmailValid;
}
// 2. Check birthday
function checkBirthdayValid(input) {
input.value = input.value.trim();
if (input.value.length === 0) {
showError(input, "Birthday can not be empty!!!");
return false;
} else {
showSuccess(input);
return true;
}
return true;
}
// 4. Check gender
function checkGenderValid(inputs) {
let isValidGender = true;
if (!(inputs[0].checked || inputs[1].checked)) {
showError(inputs[0], "You must choose gender!!!");
isValidGender = false;
} else {
showSuccess(inputs[0]);
isValidGender = true;
}
return isValidGender;
}
// 5. Check hobbies
function checkHobbiesValid(inputs) {
const errorHobbie = document.querySelector("#form-error-hobbies");
let isValidGender = true;
if (!(inputs[0].checked
|| inputs[1].checked
|| inputs[2].checked
|| inputs[3].checked)) {
errorHobbie.classList.add("activeError");
errorHobbie.innerText = "You must choose hobbie!!!";
isValidGender = false;
} else {
errorHobbie.classList.remove("activeError");
errorHobbie.innerText = "";
isValidGender = true;
}
return isValidGender;
}
function validationForm() {
let isValid = false;
let isEmailValid = checkEmailValid(email);
let isNameValid = checkNameValid(fullName);
let isBirthdayValid = checkBirthdayValid(birthday);
let isGenderValid = checkGenderValid(genders);
let isHobbiesValid = checkHobbiesValid(hobbies);
if (isNameValid && isEmailValid && isBirthdayValid && isGenderValid && isHobbiesValid) {
isValid = true;
}
return isValid;
}