Untitled

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;
}