Подтвердите форму по мере продвижения пользователя (не только при отправке)

Question

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

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

Моя HTML-форма:

<form class="needs-validation" id="registration-form" novalidate>
    <div class="row">
        <div class="col-md mb-3 mx-auto">
            <label for="firstName">First name</label>
            <input type="text" class="form-control" id="fname" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Required.
                </div>
        </div>
        <div class="col-md mb-3 mx-auto">
            <label for="lastName">Last name</label>
            <input type="text" class="form-control" id="lname" placeholder="" value="" required>
            <div class="invalid-feedback">
              Required.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md mb-3 mx-auto">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" placeholder="you@example.com" required>
            <div class="invalid-feedback">
                Email required.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md mb-3 mx-auto">
            <label for="password">Create a password</label>
            <input type="password" class="form-control" id="password" pattern="(?=.*)\S{6,}" required>
            <div class="invalid-feedback">
                Please enter a valid password for your account. Password must be at least 6 characters in length.
            </div>
        </div>
        <div class="col-md mb-3 mx-auto">
            <label for="confirm-password">Confirm password</label>
            <input type="password" class="form-control" id="confirm-password" required>
            <div id="confirm-password-invalid-feedback" class="invalid-feedback">
                Please confirm your password.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md mb-3 mx-auto">
            <button class="btn btn-primary btn-lg btn-block" type="submit">Create My Account</button>
        </div>
    </div>
</form>

Мой Javascript выглядит следующим образом: validation.js

(function() {
'use strict';

///...

$("form").submit(function(e){
    //register();
    if ($("form")[0].checkValidity() === false) {
        console.log('validation failed');
        event.preventDefault();
        event.stopPropagation();
    }
    else {
        console.log('calling posting now');
        posting();
        event.preventDefault();            
    }
});

var forms = document.getElementsByClassName('needs-validation');
var password = document.getElementById('password'), confirm_password = document.getElementById('confirm-password');

function validatePassword() {
    if(password.value != confirm_password.value) {
        //there is no boolean var to set validity to invalid
        //password.setCustomValidity('invalid');
        confirm_password.setCustomValidity('invalid');

        if (confirm_password.value != '') {
            document.getElementById('confirm-password-invalid-feedback').textContent = 'The passwords do not match.';
        }
        else {
            document.getElementById('confirm-password-invalid-feedback').textContent = 'Confirm your password.';
        }

        event.preventDefault();
        event.stopPropagation();
    }
    else {
        password.setCustomValidity(''); //reset validity to valid

        if (password.validity.valid == false) {
            document.getElementById('confirm-password-invalid-feedback').textContent = 'Please confirm your password.';
        }
        else {
            confirm_password.setCustomValidity('');
        }
    }
}

window.addEventListener('load', function() {
    //fetch all the forms we want to apply custom Bootstrap validation styles to
    //loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
            validatePassword();

            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }

            form.classList.add('was-validated');
        }, false);
    });

    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
}, false);
})();

Answer 1

Вы можете попробовать это:

$("input.email").change(function(){
    // Add the verification logic for that particular input (validation function?)
});

Answer 2

Если вы хотите проверить поля перед отправкой формы, вам необходимо настроить прослушиватель событий при изменении формы и обработать проверку внутри нее.Например, если вы хотите проверить пароль, вы можете поместить свою функцию проверки пароля в функцию изменения формы следующим образом:

$("form").change(function(){
    validatePassword();
});

Answer 3

вызов функции при изменении

$('form').change(function() {
    // code
})

Вы также можете сделать это:

$('form').keydown(function() {
    // code
})

Это было бы в прямом эфире.