Как совместить две функции JS
<form class='formWithValidation'>
<div>
<label for='form_fname'>Имя: </label>
<input type='text' class='form_name field' name='first_name' data-validationType="name">
</div>
<div>
<label for='form_surname'>Фамилия: </label>
<input type='text' class='form_surname field' name='second_name' data-validationType="name">
</div>
<div>
<label for='form_age'>Возраст: </label>
<input type='text' class='form_age field' name='age' data-validationType="age">
</div>
<div>
<label for='form_email'>Email: </label>
<input type='email' class='form_email field' name='email'>
</div>
</form>
</form>
<h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
<div class="hobby">
<form id="frm2" name="ffirs">
<p><input type="checkbox" id="hobby" name="sport" >Sport</p>
<p><input type="checkbox" id="hobby" name="school" >Учеба.</p>
<p><input type="checkbox" id="hobby" name="reading" >Чтение.</p>
<p><input type="checkbox" id="hobby" name="music" >Музыка.</p>
<p><input type="checkbox" id="hobby" name="dance" >Танцы.</p>
<p><input type="checkbox" id="hobby" name="drawing" >Рисование.</p>
<p><input type="checkbox" id="hobby" name="yoga" >Йога.</p>
</form>
</div>
<button onclick="validation()">Отправить данные</button>
<script>
let form = document.querySelector('.formWithValidation');
let validateBtn = form.querySelector('.validateBtn');
let form_name = form.querySelector('.form_name');
let form_surname = form.querySelector('.form_surname');
let form_age = form.querySelector('.form_age');
let form_email = form.querySelector('.form_email');
let fields = form.querySelectorAll('.field');
console.log('clicked on validate------------------------------------------------')
console.log('form_name: ', form_name.value)
console.log('form_surname: ', form_surname.value)
console.log('form_age: ', form_age.value)
console.log('form_email: ', form_email.value)
const validation = input => {
const checkboxes = frm2.querySelectorAll('input');
let count = 0;
checkboxes.forEach(c => c.checked ? count++ : 0);
if (count < 4) {
console.log("Правильно");
} else {
alert("Больше трех пунктов выбрать нельзя, выберите не больше трех");
}
const val = input.value;
switch(input.dataset.validationtype) {
case 'name': return /^[А-ЯЁ][а-яё]+$/.test(val);
case 'age' : return parseInt(val) >= 18 && parseInt(val) <= 100;
default : return val !== '';
}
}
form.addEventListener('submit', function (event) {
event.preventDefault()
let errors = form.querySelectorAll('.error')
for (let i = 0; i < errors.length; i++) {
errors[i].remove()
}
for (let i = 0; i < fields.length; i++) {
if (!validation(fields[i])) {
console.log('Поле нужно обязательно заполнить!', fields[i])
let error = document.createElement('div')
error.className='error'
error.style.color = 'red'
error.innerHTML = 'Поле нужно обязательно заполнить!'
form[i].parentElement.insertBefore(error, fields[i])
}
}
console.log('clicked on validate------------------------------------------------')
console.log('form_name: ', form_name.value)
console.log('form_surname: ', form_surname.value)
console.log('form_age: ', form_age.value)
console.log('form_email: ', form_email.value)
});
</script>
|
monster200214,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.error {
color: #FF0000;
border: 1px solid #FF0000;
border-radius: 8px;
width: 280px;
padding: 4px;
}
</style>
</head>
<body>
<form class='formWithValidation'>
<div>
<label for='form_fname'>Имя: </label>
<input type='text' class='form_name field' name='first_name' data-validationType="name">
</div>
<div>
<label for='form_surname'>Фамилия: </label>
<input type='text' class='form_surname field' name='second_name' data-validationType="name">
</div>
<div>
<label for='form_age'>Возраст: </label>
<input type='text' class='form_age field' name='age' data-validationType="age">
</div>
<div>
<label for='form_email'>Email: </label>
<input type='email' class='form_email field' name='email'>
</div>
<h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
<div class="hobby">
<p><input type="checkbox" name="sport">Sport</p>
<p><input type="checkbox" name="school">Учеба.</p>
<p><input type="checkbox" name="reading">Чтение.</p>
<p><input type="checkbox" name="music">Музыка.</p>
<p><input type="checkbox" name="dance">Танцы.</p>
<p><input type="checkbox" name="drawing">Рисование.</p>
<p><input type="checkbox" name="yoga">Йога.</p>
</div>
<button>Отправить данные</button>
</form>
<script>
let form = document.querySelector('.formWithValidation');
let hobby = form.querySelector('.hobby');
let fields = form.querySelectorAll('.field');
const delay = 5000;
const showError = (elem, error) => {
let div = document.createElement('div')
div.className = 'error';
div.innerHTML = error;
elem.after(div);
window.setTimeout(_ => div.remove(), delay)
}
const validation = event => {
const checkboxes = hobby.querySelectorAll(':checked');
let validate = true;
let count = checkboxes.length;
let error;
if (count > 3) error = "Больше трех пунктов выбрать нельзя, выберите не больше трех";
if (!count) error = "Сделайте выбор, не более трёх пунктов";
if (error) {
showError(hobby, error);
validate = error = false;
};
for (let input of fields) {
const val = input.value;
switch (input.dataset.validationtype) {
case 'name':
/^[А-ЯЁ][а-яё]+$/.test(val) || (error = 'Поле нужно обязательно заполнить, первая буква заглавная, язык русский!');
break;
case 'age':
(parseInt(val) >= 18 && parseInt(val) <= 100) || (error = 'Поле нужно обязательно заполнить, числом от 18 до 100!');
break;
default:
val.trim() || (error = 'Поле нужно обязательно заполнить');
};
if (error) {
showError(input, error);
validate = error = false;
}
}
if (!validate) event.preventDefault();
}
form.addEventListener('submit', validation);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:49. |