Показать сообщение отдельно
  #6 (permalink)  
Старый 17.12.2021, 21:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

валидация формы
Paulsw01,

<!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");
            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)
            })
            let timer;
            form.addEventListener("submit", function(event) {
                event.preventDefault();
                let inputs = Array.from(this.querySelectorAll(".validation"));
                let validate = inputs.every(validation);
                let txt = "Не все поля заполнены правильно!"
                if (validate) txt = inputs.map(({
                    value
                }) => value).join(" ");
                out.innerHTML = txt;
                window.clearTimeout(timer);
                if (!validate) timer = window.setTimeout(_ => out.innerHTML = "", 10000)
            })
        });
    </script>
</head>
<body>
    <p id="out"></p>
    <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>
</body>
</html>

Последний раз редактировалось рони, 17.12.2021 в 21:47.
Ответить с цитированием