Как сделать проверку чекбокса?
Как сделать проверку чекбокса в момент отправки формы? Должны проверяться сразу все input элементы, а у checkbox добавляется класс is-invalid, когда он выбран, запутался с этим.
const form = document.querySelector(".form-container");
form.addEventListener("submit", (evt) => {
if (!validateForm()) {
evt.preventDefault();
} else {
validateForm();
}
});
const validationRules = {
required: {
test: (val) => { return val.length > 0 },
error: (field) => `Please enter a valid ${field}`,
},
email: {
test: (val) => {
let regex = /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i;
return regex.test(val)
},
error: (field) => `Please enter a valid ${field}`
},
};
const fileFields = Array.prototype.slice.call(form.querySelectorAll('[data-field]')).map(field => {
let entry = field.querySelector('[data-validate]');
return {
wrap: field,
entry: entry,
message: field.querySelector('[data-validate-mess]'),
rules: !!entry.dataset.validate ? entry.dataset.validate.split('|') : [],
validateName: !!entry.dataset.validateAs ? entry.dataset.validateAs : entry.name,
isValid: null
};
});
fileFields.forEach((item) => {
if(item.rules.length) {
item.entry.addEventListener('change', () => {
validateField(item);
});
}
});
const validateForm = () => {
let formIsValid = true;
fileFields.forEach(field => {
formIsValid = validateField(field) ? formIsValid : false;
});
return formIsValid;
}
const validateField = (field) => {
field.isValid = true;
field.rules.forEach(rule => {
if(validationRules.hasOwnProperty(rule) &&
!validationRules[rule].test(field.entry.value)) {
field.isValid = false;
showError(field, validationRules[rule].error(field.validateName));
} else if (validationRules.hasOwnProperty(rule) && field.entry.checked) {
field.isValid = false;
showError(field, validationRules[rule].error(field.validateName));
}
});
if(field.isValid){
hideError(field);
}
return field.isValid;
}
const showError = (field, message) => {
field.message.innerHTML = message;
field.wrap.classList.add('is-invalid');
}
const hideError = (field) => {
field.message.innerHTML = '';
field.wrap.classList.remove('is-invalid');
}
.error {
color: red;
}
<div class="form-container">
<form class="form" method="POST" action="">
<div class="form-input" data-field="">
<label for="name">Name</label>
<input id="name" type="text" data-validate="name|required" data-validate-as="name">
<span class="error" data-validate-mess=""></span>
</div>
<div class="form-input" data-field="">
<label for="email">Email</label>
<input id="email" type="text" data-validate="email|required" data-validate-as="email">
<span class="error" data-validate-mess=""></span>
</div>
<div class="form-input" data-field="">
<input id="privacy" type="checkbox" data-validate="checked|required" data-validate-as="checkbox">
<label for="privacy">I agree</label>
<span class="error" data-validate-mess=""></span>
</div>
<button type="submit">Send</button>
</form>
</div>
Ответы (1 шт):
Автор решения: highpassion
→ Ссылка
Так должно сработать только на field.validateName, у которого значение checkbox
const form = document.querySelector(".form-container");
form.addEventListener("submit", (evt) => {
if (!validateForm()) {
evt.preventDefault();
} else {
validateForm();
}
});
const validationRules = {
required: {
test: (val) => { return val.length > 0 },
error: (field) => `Please enter a valid ${field}`,
},
email: {
test: (val) => {
let regex = /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i;
return regex.test(val)
},
error: (field) => `Please enter a valid ${field}`
},
};
const fileFields = Array.prototype.slice.call(form.querySelectorAll('[data-field]')).map(field => {
let entry = field.querySelector('[data-validate]');
return {
wrap: field,
entry: entry,
message: field.querySelector('[data-validate-mess]'),
rules: !!entry.dataset.validate ? entry.dataset.validate.split('|') : [],
validateName: !!entry.dataset.validateAs ? entry.dataset.validateAs : entry.name,
isValid: null
};
});
fileFields.forEach((item) => {
if(item.rules.length) {
item.entry.addEventListener('change', () => {
validateField(item);
});
}
});
const validateForm = () => {
let formIsValid = true;
fileFields.forEach(field => {
formIsValid = validateField(field) ? formIsValid : false;
});
return formIsValid;
}
const validateField = (field) => {
field.isValid = true;
field.rules.forEach(rule => {
if(validationRules.hasOwnProperty(rule) &&
!validationRules[rule].test(field.entry.value)) {
field.isValid = false;
showError(field, validationRules[rule].error(field.validateName));
} else if (validationRules.hasOwnProperty(rule) && !(field.entry.checked) && field.validateName == "checkbox" ) {
field.isValid = false;
showError(field, validationRules[rule].error(field.validateName));
}
});
if(field.isValid){
hideError(field);
}
return field.isValid;
}
const showError = (field, message) => {
field.message.innerHTML = message;
field.wrap.classList.add('is-invalid');
}
const hideError = (field) => {
field.message.innerHTML = '';
field.wrap.classList.remove('is-invalid');
}
.error {
color: red;
}
<div class="form-container">
<form class="form" method="POST" action="">
<div class="form-input" data-field="">
<label for="name">Name</label>
<input id="name" type="text" data-validate="name|required" data-validate-as="name">
<span class="error" data-validate-mess=""></span>
</div>
<div class="form-input" data-field="">
<label for="email">Email</label>
<input id="email" type="text" data-validate="email|required" data-validate-as="email">
<span class="error" data-validate-mess=""></span>
</div>
<div class="form-input" data-field="">
<input id="privacy" type="checkbox" data-validate="checked|required" data-validate-as="checkbox">
<label for="privacy">I agree</label>
<span class="error" data-validate-mess=""></span>
</div>
<button type="submit">Send</button>
</form>
</div>