Helper function to re-calculate input styles for Material Design Lite

fix-mdl.js

function fixMdlFields(element, validate) {
    element.querySelectorAll("input, textarea").forEach((el) => {
        let parentClasses = el.parentNode.classList;
        if (el.disabled) {
            parentClasses.add("is-disabled");
        } else {
            parentClasses.remove("is-disabled");
        }
        if (el.readOnly) {
            parentClasses.add("is-readonly");
        } else {
            parentClasses.remove("is-readonly");
        }
        if (validate && !el.validity.valid) {
            parentClasses.add("is-invalid");
        } else {
            parentClasses.remove("is-invalid");
        }
    });

    element.querySelectorAll("input[type=\"text\"], input[type=\"password\"], input[type=\"email\"], textarea").forEach((el) => {
        let parentClasses = el.parentNode.classList;
        if (el.value !== "") {
            parentClasses.add("is-dirty");
        } else {
            parentClasses.remove("is-dirty");
        }

        if (el.readOnly) {
            parentClasses.add("is-readonly");
        } else {
            parentClasses.remove("is-readonly");
        }
    });

    element.querySelectorAll("input[type=\"checkbox\"]").forEach((el) => {
        let parentClasses = el.parentNode.classList;
        if (el.checked) {
            parentClasses.add("is-checked");
        } else {
            parentClasses.remove("is-checked");
        }
    });
}