Javascript - Enable Submit button when all input is valid

Question

So I have a form with some inputs (First and last name, user name, birthday, password and email) with some validation conditions which I made like this for example :

function checkfnlname(field) {
curr = document.getElementById(field).value;
if ( curr.length > 0) {
    updateCSSClass(field, 1);
    return true;
}
else {
    updateCSSClass(field, 0);
    return false;
}}

This changes it's color and return true . I call these function using onKeyUp="". Now what I want to do is make the Submit button disabled until all the fields have been completed and validated by the functions up there. I wrote this function :

function formvalid() {
if (checkfnlname('fname') && && (all other fields)) {
    document.getElementByID("submitinput").disabled = false;
}
else {
    document.getElementByID("submitinput").disabled = true;
}
return 1;}

But I have no idea how/where to call it. (I tried a lot of things I found but nothing worked) Is this the right way to do it ? if so how can I call this function ?

Answer 1

Here's a pure ES6 and HTML5 way.

You can watch your form for changes and then check to see if the form is valid.

const form = document.getElementById('form');
form.addEventListener("change", () => {
    document.getElementById('submitBtn').disabled = !form.checkValidity()
});

I have modified an example from MDN to show this in action -> https://jsfiddle.net/denov/hxf3knob/2/