我的表单没有提交是有原因的吗？

Question

I want the form to submit when there are no errors and this is the code I've used to ensure that.

const Invalid = document.getElementsByClassName('form-control error')
if (!Invalid) {
    form.submit()
}

This is the rest of the javascript code for reference. Whenever there is an error the class name for that input changes to form-control error, so by making sure there are no class names of form-control error I verify there are no errors and the form should submit, but that doesn't seem to be the case here.

const Form = document.getElementById('form');
const Username = document.getElementById('username');
const Password = document.getElementById('password');
const Conpassword = document.getElementById('confirm_password');
const Email = document.getElementById('email');


Form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();

});


function checkInputs() {
    const UsernameValue = username.value.trim();
    const PasswordValue = password.value.trim();
    const ConpasswordValue = confirm_password.value.trim();
    const EmailValue = email.value.trim();

    if (UsernameValue === '' || UsernameValue == null) {
        setErrorFor(Username, 'Username required');
    } else if (!validateUsername(UsernameValue)) {
        setErrorFor(Username, 'Only alphanumeric characters valid')
    } else {
        setSuccessFor(Username);
    }

    if (EmailValue === '' || EmailValue == null) {
        setErrorFor(Email, 'Email required');
    } else if (!isEmail(EmailValue)) {
        setErrorFor(Email, 'Email is not valid');
    } else {
        setSuccessFor(Email);
    }

    if (PasswordValue === '' || PasswordValue == null) {
        setErrorFor(Password, 'Password required');
    } else {
        setSuccessFor(Password);
    }

    if (ConpasswordValue === '' || ConpasswordValue == null) {
        setErrorFor(Conpassword, 'Confirm password');
    } else if (PasswordValue !== ConpasswordValue) {
        setErrorFor(Conpassword, "Passwords don't match");
    } else {
        setSuccessFor(Conpassword)
    }

    if (PasswordValue.length < 8) {
        setErrorFor(Password, 'Password needs to be at least 8 characters')
    } else {
        setSuccessFor(Password)
    }

    const Invalid = document.getElementsByClassName('form-control error')
    if (!Invalid) {
        form.submit()
    }

}

function setErrorFor(input, message) {
    const FormControl = input.parentElement;
    const Small = FormControl.querySelector('small');

    Small.innerText = message;

    FormControl.className = 'form-control error';
}

function setSuccessFor(input) {
    const FormControl = input.parentElement;
    FormControl.className = 'form-control success'
}

function isEmail(Email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9].{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z].{2,}))$/.test(Email);
}

function validateUsername(Username) {
    return /^[a-zA-Z0-9_]*$/.test(Username)
}

Answer 1

document.getElementsByClassName returns an Object... specifically an HTMLCollection

Objects are "truthy"... so !object is always false

so, in your code Invalid is always "truthy"... so !Invalid is always false - try

if (!Invalid.length)

since that will be true if Invalid.length is zero - which is what you're after