Двух секунд может быть мало, а 10 слишком много... Не в секундах дело.
Ну как тебе объяснить... Сообщения не должны посылаться в пустоту. Особенно сообщения об ошибках. Они не должны самопроизвольно пропадать. Система должна убедиться, что юзверь их хотя бы увидел. Т.е они должны пропадать только после действий этого юзверя. Например он нажмет кнопку ОК на сообщении или закроет его крестиком или начнет редактировать поле в котором встретилась ошибка. |
voraa,
в данном случае делать полноценный вывод, считаю излишним, задание видимо тестовое, но и совсем оставлять без вывода ошибок тоже решил не корректно, считай что это "заглушка" типа console.log. с выводами твоими согласен, но тут до продакшен ой как далеко. |
voraa,
а так? )))
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById("form");
const inputs = Array.from(form.querySelectorAll(".validation"));
const err = "Не все поля заполнены правильно!";
function validation(input) {
let txt = input.value.trim();
let reg = /(^[^А-Яа-яЁё]+)|([^А-Яа-яЁё]+$)/g;
txt = txt.replace(reg, '');
reg = /[-\s]+/g;
txt = txt.replace(reg, ([a, ...b]) => a);
reg = /[^А-Яа-яЁё\s-]/g;
txt = txt.replace(reg, '');
txt = txt.toLowerCase();
reg = /^./;
txt = txt.replace(reg, a => a.toUpperCase());
if (txt !== input.value) input.value = txt;
return !!txt.length;
}
form.addEventListener("focusout", function({target}) {
if (target = target.closest(".validation")) validation(target)
})
function validateAll()
{
let validate = inputs.every(validation);
return validate
}
function personality()
{
let txt = inputs.map(({ value }) => value).join(" ");
return txt
}
form.addEventListener("submit", function(event) {
event.preventDefault();
let validate = validateAll();
if(validate) {
let txt = personality();
out.insertAdjacentHTML('beforeend', `<li>${txt}</li>`);
form.reset();
}
else attention.innerHTML = err;
})
form.addEventListener("input", function({target}) {
if (target = target.closest(".validation") && attention.innerHTML === err) attention.innerHTML = "";
})
});
</script>
</head>
<body>
<form id="form">
<input type="text" class="validation" id='surname' placeholder="Фамилия" />
<input type="text" class="validation" id='name' placeholder="Имя" />
<input type="text" class="validation" id='patronymic' placeholder="Отчество" />
<button id="button" class="btn btn-success">Отправить</button>
</form>
<div id="attention"></div>
<ul id="out"></ul>
</body>
</html>
|
Как сделать чтобы после правильной оправки формы форма очищалась, и каждый новый ввод не перезаписывал, а добавлял новый параграф?
|
Цитата:
добавлено, пост #13 |
| Часовой пояс GMT +3, время: 12:52. |