Use the form below to create your account.
+ + +Have an account? Login
+ + +you registered!
+Have an account? Login
+${msg}
+ `; + + inptSubmit.classList.add("er-sub"); + + setTimeout(() => { + if (border !== null) { + border.style.borderBottom = `2px solid #f2f2f2`; + color.style.color = `#111`; + } + + oErrorBlock.style.opacity = "0"; + inptSubmit.classList.remove("er-sub"); + }, 4000); +} + +const aMiniInpt = document.querySelectorAll(".inpt__mini"); +const sFirstName = document.getElementById("f-name"); +const sLastName = document.getElementById("l-name"); +const sEmail = document.getElementById("email"); +const bGender = document.getElementsByName("gender"); +const sPass = document.getElementById("pass"); +const sConfPass = document.getElementById("conf-pass"); + +const confSvg = document.querySelector(".esvg"); + +function fCheckReg() { + const allowedRegex = /^[a-z]+$/i; + + // First Name + if (sFirstName.value.length === 0) { + return fShowError( + aInpt[0], + sFirstName, + "The 'First Name' field cannot be left empty." + ); + } + if (!allowedRegex.test(sFirstName.value)) { + return fShowError( + aInpt[0], + sFirstName, + "Fist name must contain only letters." + ); + } + + // Last Name + if (sLastName.value.length === 0) { + return fShowError( + aInpt[1], + sLastName, + "The 'Last Name' field cannot be left empty." + ); + } + if (!allowedRegex.test(sLastName.value)) { + return fShowError( + aInpt[1], + sLastName, + "Last name must contain only letters." + ); + } + + // Nationality + if (vNationality.value === "null") { + return fShowError( + aInpt[2], + vNationality, + "The 'Nationality' field cannot be left empty." + ); + } + + // E-mail + if (!sEmail.value.includes("@")) { + confSvg.style.opacity = "0"; + + return fShowError(aInpt[3], sEmail, "The 'Email' field must contain @."); + } + + // Date of Birth + confSvg.style.opacity = "1"; + + if (vDay.value === "null") { + return fShowError( + aMiniInpt[0], + vDay, + "The 'Date of Birth' field cannot be left empty." + ); + } + + if (vMounth.value === "null") { + return fShowError( + aMiniInpt[1], + vMounth, + "The 'Date of Birth' field cannot be left empty." + ); + } + + if (vYear.value === "null") { + return fShowError( + aMiniInpt[2], + vYear, + "The 'Date of Birth' field cannot be left empty." + ); + } + + // Gender + if (!bGender[0].checked && !bGender[1].checked) { + return fShowError(null, null, "The 'Gender' field cannot be left empty."); + } + + // Password + let hasUppercase = false; + let hasLowercase = false; + let hasNumber = false; + + if (sPass.value.length < 8) { + return fShowError( + aInpt[6], + sPass, + "The password must contain at least 8 characters, uppercase and lowercase letters, as well as numbers." + ); + } + + for (let i = 0; i < sPass.value.length; i++) { + const char = sPass.value[i]; + if (char >= "A" && char <= "Z") { + hasUppercase = true; + } else if (char >= "a" && char <= "z") { + hasLowercase = true; + } else if (char >= "0" && char <= "9") { + hasNumber = true; + } + } + + if (!hasUppercase || !hasLowercase || !hasNumber) { + return fShowError( + aInpt[6], + sPass, + "The password must contain at least 8 characters, uppercase and lowercase letters, as well as numbers." + ); + } + + // Confirm Password + if (sConfPass.value !== sPass.value) { + return fShowError(aInpt[7], sConfPass, "Passwords must match."); + } + + sFirstName.value = ""; + sLastName.value = ""; + vNationality.value = "null" + sEmail.value = ""; + vDay.value = "null"; + vMounth.value = "null"; + vYear.value = "null"; + bGender[0].checked = false; + bGender[1].checked = false; + sPass.value = ""; + sConfPass.value = ""; + + const oRegBlock = document.querySelector(".main-container__reg"); + const oFinalBlock = document.querySelector(".main-container__final-reg"); + + oRegBlock.style.display = "none"; + oFinalBlock.style.display = "flex"; + oFinalBlock.style.opacity = "1"; +}