Приближается к встроенной форме

Проверка входа от пользователя всегда должно происходить на сервере, поэтому зачем проверять его в браузере заранее? Потому что UX. Дни перезарядки страниц с сообщениями об ошибках (и, следовательно, стертые пароль-полями), и были в течение многих лет. Ваши пользователи не должны иметь возможность представить форму с отсутствующими данными.

Я хочу продемонстрировать, что встроенная проверка не является ракетой-хирургией, и что она выполняется с несколькими строками JS и текущих веб-стандартов, без каких-либо библиотек и структур.

Прилипать к браузеру стандарты

Это хороший подход, чтобы придерживаться веб-стандартов, когда это возможно, а не для переосмысления браузера. Вы, вероятно, сделаете худшую работу, чем поставщики браузера. Все современные браузеры имеют какую-то мгновенную проверку, которая предотвратит форму «отправить», когда E.G. Вход с «обязательным» –attribute не имеет значения.

Прежде чем пытаться осуществить это самостоятельно, подумайте о прилипении к этому стандарту. Для более простых форм в современных браузерах это будет достаточно.

Прочитайте все о браузере-нативной формы-проверке на MDN.

Сверните свою собственную встроенно-валидацию

Иногда встроенные способы недостаточно. Возможно, вам придется поддержать старые браузеры, которые не проверяют. Часто клиент или дизайнер не довольны стилем обратной связи браузера, не соответствующих стилю вашего сайта. Большую часть времени валидационные изменения в зависимости от определенных областей, таких как день рождения, который также не поддерживается браузерами по умолчанию.

Давайте посмотрим, как решить такую задачу.

HTML

Начнем с минимальной формы, где пользователь должен ввести свое имя и отметьте флажок. (Атрибут «ovalidate» отключает проверку браузера, что облегчает разработку и проверку вашего кода.)

    
        Your first name:
        
    
    
        
        I accept the terms.
    
    Submit Form

Для начала мы должны подумать о способе прикрепления правил валидации к соответствующим полям. Один из возможных способов было бы определить некоторые общие правила и добавить их на наши входы в качестве атрибутов данных.

Таким образом, мы можем легко добавлять и удалять правила проверки, как только они будут правильно настроенными.

Другая вещь, которая отсутствует, – это проверка – сообщения. Пользователь должен знать, что они забыли или вошли не так.

Для каждого правила валидации должно быть соответствующее сообщение. Мы могли бы создать один контейнер для сообщений обратной связи, и добавить их через js, когда произойдет ошибки проверки, или мы могли бы добавить все возможные сообщения на разметку и отображать только применимые. Я большой поклонник сохранения всех сообщений в разметке, поскольку это легче обрабатывать языки таким образом. Мы можем получить правильные переводы, когда сервер отображает страницу, и не нужно знать об этом в JS.

Добавим одно сообщение для каждого правила проверки. Мы добавим их прямо рядом со входным тегом на метке. Ариа- и роль-атрибуты помогают сохранить нашу форму доступной.

    Please don't enter any numbers.


    Please enter 10 characters or fewer.


    Please enter a name.

В наших CSS мы будем скрывать сообщения по умолчанию и только показать их, когда наш скрипт добавляет класс «Видимый сообщение».

[data-validation-message] {
    display: none;
}
[data-validation-message].message-visible {
    display: block;
}

Таким образом, наша форма все равно будет выглядеть хорошо с ДЖС деактивированным или сломанным.

Давайте повеселимся! Теперь наша JS-реализация строит никаких структур или библиотек вообще. Мы используем ES6-Syntax и -Features, что означает, что вам нужно использовать что-то вроде Babel, если вам нужно поддержать старые браузеры.

Подход

• Каждый валидатор (например, «Nonumbers») будет функцией, которая получает входной элемент в качестве параметра и возвращает True (является действительным) или false (неверно).
• Мы создадим функцию, которая проверяет поле для действительности, проверяя его значение против всех соответствующих валидаторов, вызывая функции с первой точки.
• Он будет вызван всякий раз, когда пользователь фокусируется из него (Blur-Event).
• Если валидатор не удается, эта функция позаботится о том, чтобы показать правильное сообщение об ошибке для пользователя.
• Когда пользователь представляет форму, мы проверим каждое поле формы один раз, и предотвратите отправку, если есть какие-либо неверные поля.

Валидаторы

Валидаторы являются наиболее простыми. Мы создадим функции для каждого правила, нам нужны. Давайте возьмем «необоснованные» в качестве примера.

function noNumbers(element) {
    return !element.value.match(/[0-9]/g);
}

У нас будет еще несколько из них, так почему бы не собрать их в объекте? Мы добавим два других, которые нам нужны в нашей примерной разметке, и добавьте немного синтаксиса ES6, пока мы на нем.

const validators = {
    required: element => element.value.length > 0,
    noNumbers: element => !element.value.match(/[0-9]/g),
    maxLength: element => element.value.length <= 10,
    mustBeChecked: element => element.checked
};

Проверка

Теперь нам нужна функция, которая вызывает все эти проверки, которые мы предоставлены в атрибуте данных ввода-элемента. Он будет разбирать содержимое его «Дата-подтверждения» –attribute и преобразует его в массив. Поскольку имена правил равны названиям их соответствующей функции, мы можем вызвать их, вызывая «Валидаторы [правило] (значение)».

function validateElement(element) {
    const rules = element.dataset.validate.split(" ");
    rules.forEach(rule => {
        if(validators[rule](element)) {
            return;
        } else {
            markElementInvalid(element, rule);
        }
    });
}

Если Validator возвращает «false», мы знаем, что проверка не удалась и должна показывать правильную обратную связь и добавить несколько классов. Для этого мы создадим новую функцию под названием «MarkelementInValid».

function markElementInvalid(element, validatorName) {
    element.classList.add("invalid");
    element.setAttribute("aria-invalid", true);
    const feedbackMessage = element
                            .parentNode
                            .querySelector(
                                `[data-validation-message=${validatorName}]`
                            );
    feedbackMessage.classList.add("message-visible");
    feedbackMessage.setAttribute('aria-hidden', false);
}

«MarkelementInvalid» установит некоторые классы и атрибуты на поле ввода и обратной связи. «ARIA» -Attributes поможет немного улучшить доступность. Мы будем использовать «неверный» -класс, чтобы стиль неверного состояния ввода, поэтому нам нужно будет установить, что в наших CSS тоже.

input.invalid {
  border-color: brown;
}

Главная функциональность там, она просто должна быть вызвана в нужное время.

Есть несколько моментов во времени, когда вызывает проверку.

• На загрузке страницы
• После того, как пользователь фокусируется входное поле
• После того, как пользователь меняет входное поле
• После того, как пользователь сфокусирован входное поле
• После того, как пользователь предписывает форму

Мы не хотим раздражать пользователя, поэтому мы должны быть осторожны. Отображение проходящей проверки слишком рано может столкнуться как напротив. Это хорошая практика, чтобы проверить поле после RencoCus, или Blur, что означает, что входные проигрывает фокус, нажав «вкладку» или нажав за его пределами. Мы проверим каждое поле еще раз, после того, как пользователь подает форму, чтобы предотвратить отправку ложных данных.

Давайте включим проверку для нашего поля на размытие. Этот код инициализирует нашу предыдущую работу.

const form = document.getElementById("first-name-form");
const formElements = Array.from(form.elements);

formElements.forEach(formElement => {
  formElement.addEventListener("blur", () => {
    validateElement(formElement);
  });
});

Одно предостережение: «размытие» -элемент работает хорошо для текстовых входов. Для других типов «сосредоточение» или «изменение» может работать лучше, в зависимости от желаемого поведения.

Теперь пользователь получает обратную связь после ввода плохих данных. Но нет способа удалить состояние ошибки после того, как они исправили ошибки. Мы введем функцию «RESETVALIDALICALICALICAL», которая в основном является точной противоположностью «маркелементинварили». Это немного проще, так как нет валидатора для рассмотрения. Входное поле будет сброшено в его начальное состояние.

function resetValidation(element) {
    element.classList.remove("invalid");
    element.setAttribute("aria-invalid", false);
    element
        .parentNode
        .querySelectorAll("[data-validation-message]")
        .forEach(e => {
            e.classList.remove("message-visible");
            e.setAttribute("aria-hidden", true);
        });
}

Чтобы применить эту функцию сброса, мы назовем ее каждый раз, когда мы выполняем проверку до проверки. Таким образом, мы гарантируем, что он всегда устанавливается в исходное состояние, прежде чем мы что-то сделаем. Вставьте следующую строку в качестве первого в «ValidateElement».

function validateElement(element) {
  resetValidation(element);
  //...
}

Наконец, нам нужно предотвратить отправку формы, если есть какие-либо неверные поля. Пользователь может нажать напрямую на «Отправить», не фокусируясь из поля, что не оставит шансов исправить вход. Мы добавим событие-слушатель в форму, которая проверяет все поля и предотвращает отправку, если некоторые недействительны. Мы также добавим «неверный» -класс на всю форму, поэтому пользователь уверен, что что-то случилось не так.

form.addEventListener("submit", event => {
    let formIsValid = true;
    form.classList.remove("invalid");

    formElements.forEach(formElement => {
        if (!formElement.dataset) return;
        if (!formElement.dataset.validate) return;
        validateElement(formElement);
    });

    formIsValid = form.querySelectorAll(".invalid").length === 0;

    if (formIsValid === false) {
        form.classList.add("invalid");
        event.preventDefault();
    }
});

`

Рабочий пример

Вот и все! Теперь у нас есть базовая работающая встроенная проверка для нашей формы. Вот рабочий пример, не стесняйтесь вилить его и играть с ним:

Расширение и улучшение

Мы создали минимальную рабочую проверку. Вот несколько возможных способов, которыми это может быть расширено:

• Добавление анимации в сообщения об ошибках для лучшей видимости. Обратная связь – сообщения могут мигать в течение двух секунд, поэтому ялее с тем, что что-то пошло не так.
• Для длительных форм можно добавить прокрутку к первой ошибке в случае, если пользователь все еще имеет ошибки, оставленные на Form – отправить.
• Формы очень быстро получают комплекс. Иногда проверка одного поля зависит от значения другого. Например: может потребоваться поле, если пользователь моложе определенного возраста. В этом случае валидаторы должны быть продлены для приема аргументов из атрибута данных.
• Чтобы активировать/отключить целые группы входов, мы могли бы добавить «отключить данные-валидацию» –attribute к их контейнеру и предотвратить проверку ввода, если он имеет такой родительский элемент.

Это все сейчас. Если вам нравится давать отзывы или предложения, удари меня на Twitter Отказ

Спасибо за прочтение!

Оригинал: “https://dev.to/niorad/approaching-inline-form-validation-4ki”