Skip to content

Commit

Permalink
Merge pull request #2 from LakioLive/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@LakioLive
LakioLive authored Jan 23, 2025
2 parents af44088 + 91b9c54 commit 6398354
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 46 deletions.
Binary file added images/favicon.ico
View file
Binary file not shown.
33 changes: 16 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./images/favicon.ico" />
<title>Form Validation</title>
<link rel="stylesheet" href="css/formValidation.css" />
<link rel="stylesheet" href="css/carousel.css" />

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css"
/>

<style type="text/tailwindcss">
@layer utilities {
.form__inputs {
Expand Down Expand Up @@ -137,21 +136,21 @@ <h1 class="text-3xl lg:text-4xl xl:text-5xl">
placeholder="Confirm your password"
/>
</div>
<!-- <div class="flex items-center gap-1">
<input
type="checkbox"
name="terms-and-conditions"
id="terms-and-conditions"
/>
<label for="terms-and-conditions"
>I agree to the
<a
href="#"
class="form__links"
>Terms & Conditions</a
></label
>
</div> -->
<div class="form-validation__wrapper">
<div class="form-validation__input--wrapper">
<label for="terms-and-conditions">
<input
type="checkbox"
name="form-validation__required-checkbox"
id="terms-and-conditions"
/>
I agree to the
<a href="#" class="form__links"
>Terms & Conditions</a
></label
>
</div>
</div>
<input
type="submit"
value="Create account"
Expand Down
232 changes: 203 additions & 29 deletions js/formValidation.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,32 @@
const formValidation = (e) => {
const serializeForm = (formNode) => {
return new FormData(formNode);
const inputsValidationUsername = document.querySelectorAll(
"input[name='form-validation__username']",
);
const inputsValidationEmail = document.querySelectorAll(
"input[name='form-validation__email']",
);
const inputsValidationTel = document.querySelectorAll(
"input[name='form-validation__tel']",
);
const inputsValidationPassword = document.querySelectorAll(
"input[name='form-validation__password']",
);
const inputsValidationPasswordConfirm = document.querySelectorAll(
"input[name='form-validation__password--confirm']",
);
const inputsValidationCheckbox = document.querySelectorAll(
"input[name='form-validation__required-checkbox']",
);

return [
...inputsValidationUsername,
...inputsValidationEmail,
...inputsValidationTel,
...inputsValidationPassword,
...inputsValidationPasswordConfirm,
...inputsValidationCheckbox,
];
};

const addErrorContainerForFormElements = (inputElement) => {
Expand Down Expand Up @@ -33,6 +59,33 @@ const formValidation = (e) => {
);
}
}

if (inputElement.type === "checkbox") {
let checkErrorElement = true;

for (
let i = 0;
i < inputElement.parentElement.parentElement.children.length;
i++
) {
if (
inputElement.parentElement.parentElement.children[
i
].classList.contains(
`form-validation__error--${inputElement.name}`,
)
) {
checkErrorElement = false;
}
}

if (checkErrorElement) {
inputElement.parentElement.insertAdjacentHTML(
"afterend",
`<div class='form-validation__hidden form-validation__error--all form-validation__error--${inputElement.name}'></div>`,
);
}
}
};

const addTooltipContainerForFormElements = (inputElement) => {
Expand Down Expand Up @@ -175,12 +228,20 @@ const formValidation = (e) => {
container.classList.remove("form-validation__hidden");
container.classList.add("form-validation__error--inline");

if (!(input.name === "form-validation__password--confirm")) {
if (
!(
input.name === "form-validation__password--confirm" ||
input.name === "form-validation__required-checkbox"
)
) {
showAbsoluteMessage(input, infoContainer, tooltipContainer);
}

container.textContent = message;
container.style.width = `${input.offsetWidth}px`;

if (!(input.name === "form-validation__required-checkbox")) {
container.style.width = `${input.offsetWidth}px`;
}
};

const simpleValidation = (
Expand Down Expand Up @@ -365,7 +426,7 @@ const formValidation = (e) => {
}
};

const validatePassword = async (
const validatePassword = (
value,
usernameValue,
container,
Expand Down Expand Up @@ -463,6 +524,19 @@ const formValidation = (e) => {
}
};

const validateCheckbox = (input, container, tooltipContainer, isForm) => {
if (!input.checked) {
isForm
? (input.isValid = false)
: showInlineMessage(
"This field is required",
container,
input,
tooltipContainer,
);
}
};

const strengthIndicatorPassword = (progressElement, progress) => {
progressElement.classList.remove("form-validation__progress--red");
progressElement.classList.remove("form-validation__progress--orange");
Expand All @@ -485,59 +559,137 @@ const formValidation = (e) => {
// ==============================================

if (e.target.tagName === "FORM") {
const data = Array.from(serializeForm(e.target).entries());
// e.preventDefault();
const data = serializeForm(e.target);
const elementsFormNode = [...e.target.elements];
let checkUsername = "";
let checkPassValue = "";
let isValidate = true;
let isValidateData = [];
let progressElement = "";

for (let index = 0; index < data.length; index++) {
const [inputType, inputValue] = data[index];
const input = elementsFormNode.find((el) => el.name === inputType);
const currentInput = data[index];
const input = elementsFormNode.find(
(el) => el.name === currentInput.name,
);
const inputValue = input.value;
input.isValid = true;

switch (inputType) {
addErrorContainerForFormElements(input);
addTooltipContainerForFormElements(input);
addStrengthIndicatorForPassword(input);
addBtnPasswordVisibility(input);

const validationContainer =
input.parentElement.parentElement.classList.contains(
"form-validation__input--wrapper",
)
? input.parentElement.parentElement.querySelector(
`.form-validation__error--${input.name}`,
)
: input.parentElement.querySelector(
`.form-validation__error--${input.name}`,
);
const tooltipContainer = document.querySelector(
`.form-validation__tooltip--${input.name}`,
);
const infoContainer =
input.parentElement.parentElement.classList.contains(
"form-validation__input--wrapper",
)
? input.parentElement.parentElement.querySelector(
`.form-validation__error--absolute--${input.name}`,
)
: input.parentElement.querySelector(
`.form-validation__error--absolute--${input.name}`,
);

validationContainer.textContent = "";
validationContainer.classList.add("form-validation__hidden");

if (input.name === "form-validation__password") {
progressElement = input.nextElementSibling;
}

switch (input.name) {
case "form-validation__username":
checkUsername = inputValue;
validateUsername(inputValue, "", input, "", "", true);
validateUsername(
inputValue,
validationContainer,
input,
tooltipContainer,
infoContainer,
false,
);
break;
case "form-validation__email":
validateEmail(inputValue, "", input, "", "", true);
validateEmail(
inputValue,
validationContainer,
input,
tooltipContainer,
infoContainer,
false,
);
break;
case "form-validation__tel":
validatePhone(inputValue, "", input, "", "", true);
validatePhone(
inputValue,
validationContainer,
input,
tooltipContainer,
infoContainer,
false,
);
break;
case "form-validation__password":
checkPassValue = inputValue;
validatePassword(
inputValue,
checkUsername,
"",
validationContainer,
input,
"",
"",
"",
true,
tooltipContainer,
progressElement,
infoContainer,
false,
);
break;
case "form-validation__password--confirm":
validateConfirmPassword(
inputValue,
checkPassValue,
"",
validationContainer,
input,
"",
true,
tooltipContainer,
false,
);
break;
case "form-validation__required-checkbox":
validateCheckbox(
input,
validationContainer,
tooltipContainer,
false,
);
break;
}

if (!input.isValid) {
isValidate = false;
if (
validationContainer.classList.contains(
"form-validation__hidden",
)
) {
isValidateData.push(true);
} else {
isValidateData.push(false);
}
}

if (!isValidate) {
const isValidate = isValidateData.includes(false);

if (isValidate) {
e.preventDefault();
}

Expand All @@ -557,15 +709,29 @@ const formValidation = (e) => {
addStrengthIndicatorForPassword(e.target);
addBtnPasswordVisibility(e.target);

const validationContainer = e.target.parentElement.querySelector(
`.form-validation__error--${e.target.name}`,
);
const validationContainer =
e.target.parentElement.parentElement.classList.contains(
"form-validation__input--wrapper",
)
? e.target.parentElement.parentElement.querySelector(
`.form-validation__error--${e.target.name}`,
)
: e.target.parentElement.querySelector(
`.form-validation__error--${e.target.name}`,
);
const tooltipContainer = document.querySelector(
`.form-validation__tooltip--${e.target.name}`,
);
const infoContainer = e.target.parentElement.querySelector(
`.form-validation__error--absolute--${e.target.name}`,
);
const infoContainer =
e.target.parentElement.parentElement.classList.contains(
"form-validation__input--wrapper",
)
? e.target.parentElement.parentElement.querySelector(
`.form-validation__error--absolute--${e.target.name}`,
)
: e.target.parentElement.querySelector(
`.form-validation__error--absolute--${e.target.name}`,
);

validationContainer.textContent = "";
validationContainer.classList.add("form-validation__hidden");
Expand Down Expand Up @@ -627,6 +793,14 @@ const formValidation = (e) => {
false,
);
break;
case "form-validation__required-checkbox":
validateCheckbox(
e.target,
validationContainer,
tooltipContainer,
false,
);
break;
}
};

Expand Down

0 comments on commit 6398354

Please sign in to comment.