在用户进行时验证表单(不仅在提交时)

我正在为我的申请做一个登记表,希望能够验证更改的字段。例如,我希望能够在点击submit之前立即验证密码的复杂性。在我下面的代码中,这只发生在点击submit之后。

我想为你的孩子做一件类似的事情 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);
})();