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

Question

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

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

Answer 1

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

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');
});

Answer 2

Очень просто, просто используйте #ID: неверно: focus

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

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

    /**
     * Adds a class `_submit-attempted` to a form when it's 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;
}

Answer 6

для проверки «требуется»

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

// 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 - использовать атрибут «данные»

<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>