Untitled
unknown
plain_text
a year ago
3.9 kB
4
Indexable
Never
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; }