how can I fix my form validation

Question

I have a problem with my code and I would appreciate if you help me. The problem is - when you fill in all inputs in the form correctly, the script removes attribute "disabled" from the submit button but for example if you clear all fields after filling in the forms, submit button will be able to submit the form, but it have to back attribute "disable". how can I fix it?

//validation name
        document.callbackform.name.onkeyup = function() {
            var name = document.callbackform.name.value;
            if (name === "") {
                document.callbackform.name.removeAttribute("class", "ready");
                document.getElementById("callError").style.display = "block";
                document.getElementById("calllErrorTwo").style.display = "none";
            } else {
                    document.getElementById("callError").style.display = "none";
                    var pattern = new RegExp("^[а-я]+$", "i");
                    var isValid = this.value.search(pattern) >= 0;
                    if (!(isValid)) {
                        document.getElementById("calllErrorTwo").style.display = "block";
                        document.callbackform.name.removeAttribute("class", "ready");
                    } else {
                        document.getElementById("calllErrorTwo").style.display = "none";
                        document.callbackform.name.setAttribute("class", "ready");
                    }
            }
        };

        //validation phone
        document.callbackform.phone.onkeyup = function() {
            var name = document.callbackform.phone.value;
            if (name === "") {
                document.callbackform.phone.removeAttribute("class", "ready");
                document.getElementById("calltelError").style.display = "block";
                document.getElementById("calltelErrorTwo").style.display = "none";
            } else {
                    document.getElementById("calltelError").style.display = "none";
                    var pattern = new RegExp("[- +()0-9]+");
                    var isValid = this.value.search(pattern) >= 0;

                    if (!(isValid)) {
                        document.getElementById("calltelErrorTwo").style.display = "block";
                    } else {
                        document.getElementById("calltelErrorTwo").style.display = "none";
                        document.callbackform.phone.setAttribute("class", "ready");
                    }
                }
        };

        //filling the form
        document.callbackform.onkeyup = function() {
            var a = document.callbackform.name.getAttribute("class");
            var c = document.callbackform.phone.getAttribute("class");
            if (a === "ready" && c === "ready") {
                document.getElementById("subCallback").removeAttribute("disabled");
                document.getElementById("subCallback").style.cursor = "pointer";
            } else {
                document.getElementById("subCallback").setAttribute("disabled");
                document.getElementById("subCallback").style.cursor = "not-allowed";
            }
        };   

Answer 1

Simple fix. .setAttribute("disabled"); doesn't work as disabled is a property, not an attribute, as it does not have a value. You simply need to use .disabled = true; as shown:

document.getElementById("subCallback").disabled = true;

It will also be good to use the following to remove the disabled property:

document.getElementById("subCallback").disabled = false;

.

Remember, setAttribute() always requires two arguments, the second argument being the attribute value.