Проверка в HTML5.: недопустимый класс после отправки

Я создаю форму, и я хочу использовать селектор :invalid, чтобы дать "требуемым" полям ввода красную рамку, если пользователь нажимает submit, не заполняя их, но с помощью этого они отображаются в прямом направлении, когда страница грузы. Кажется недружелюбным давать такое предупреждение пользователю, прежде чем даже дать ему возможность заполнить их хотя бы один раз.

Есть ли способ, чтобы эти поля были выделены только после попытки отправить форму, иначе говоря, есть способ запустить проверку только после нажатия кнопки submit (или, по крайней мере, потерять фокус на требуемых полях ввода?).

Ответ 1

Нет ничего из коробки.

Mozilla имеет свой собственный псевдокласс для чего-то очень похожего: '-moz-ui-invalid'. Если вы хотите добиться чего-то подобного, вы должны использовать DOM-API проверки ограничений:

if(document.addEventListener){
    document.addEventListener('invalid', function(e){
        e.target.className += ' invalid';
    }, true);
}

Вы также можете использовать webshims lib polyfill, который будет не только polyfill неспособным браузером, но и добавит что-то похожее, как -moz -ui-invalid для всех браузеров (.form-ui-invalid).

Ответ 2

Я использовал этот подход для моего проекта, поэтому недопустимые поля будут выделены только после отправки:

HTML:

<form>
  <input type="email" required placeholder="Email Address">
  <input type="password" required placeholder="Password">
  <input type="submit" value="Sign in">
</form>

CSS

input.required:invalid {
    color: red;
}

JS (jQuery):

$('[type="submit"]').on('click', function () {
    // this adds 'required' class to all the required inputs under the same <form> as the submit button
    $(this)
        .closest('form')
        .find('[required]')
        .addClass('required');
});

Ответ 3

Другой способ - добавить класс hide-hints к входам с JavaScript при загрузке. Когда пользователь изменяет поле, вы удаляете класс.

В вашем CSS вы затем применяете стиль к input:not(.hide-hints):invalid. Это означает, что стиль отображения ошибок будет отображаться для пользователей без JavaScript.

Ответ 4

Очень просто использовать #ID: недействительно: фокус

Это делается только при проверке, когда вы фокусируетесь, а не на загрузке страницы

Ответ 5

Старый вопрос, но для людей, которые могли бы найти его полезным: я сделал немного script, который добавляет класс в форму, когда он пытался быть отправлен, так что вы можете создавать формы, которые были и не были попытались представить по-другому:

window.addEventListener('load', function() {

    /**
     * Adds a class `_submit-attempted` to a form when it attempted to be
     * submitted.
     *
     * This allows us to style invalid form fields differently for forms that
     * have and haven't been attemted to submit.
     */
    function addFormSubmitAttemptedTriggers() {

        var formEls = document.querySelectorAll('form');

        for (var i = 0; i < formEls.length; i++) {

            function addSubmitAttemptedTrigger(formEl) {

                var submitButtonEl = formEl.querySelector('input[type=submit]');

                if (submitButtonEl) {
                    submitButtonEl.addEventListener('click', function() {
                        formEl.classList.add('_submit-attempted');
                    });
                }

            }

            addSubmitAttemptedTrigger(formEls[i]);

        }

    }

    addFormSubmitAttemptedTriggers();

});

Теперь формы, которые будут отправляться, получат класс _submit-attempted, поэтому вы можете дать этим полям тень красных ящиков:

input {
    box-shadow: none;
}

form._submit-attempted input {
    box-shadow: 0 0 5px #F00;
}

Ответ 6

для "обязательной" проверки

способ 1 - установить атрибут 'required' для каждого элемента в форме submit

// submit button event
$('#form-submit-btn').click(function(event) {
    // set required attribute for each element
    $('#elm1, #elm2').attr('required','true');

    // since required attribute were not set (before this event), prevent form submission
    if(!$('#form')[0].checkValidity())
        return;

    // submit form if form is valid
    $('#form').submit();

});

путь 2 - использовать атрибут 'data'

<input type="text" data-required="1">

<script type="text/javascript">
// submit button event
$('#form-submit-btn').click(function(event) {
    // set required attribute based on data attribute
    $(':input[data-required]').attr('required','true');

    // since required attribute were not set (before this event), prevent form submission
    if(!$('#form')[0].checkValidity())
        return;

    // submit form if form is valid
    $('#form').submit();

});
</script>