JS 表单验证，如果所有字段都正确，则激活提交按钮答案

【问题标题】：JS form validation, activate submit button if all field correctJS 表单验证，如果所有字段都正确，则激活提交按钮
【发布时间】：2015-03-01 13:56:32
【问题描述】：

我在 JS 表单验证方面遇到了麻烦。我使用正则表达式。如果用户填写的所有字段都正确，则表单中的提交按钮处于活动状态（onmouseover），但当其中一个字段不正确时，提交按钮被禁用。当用户正确填写所有字段时 - 提交按钮仍然处于禁用状态，您能帮我解决这个问题吗？因此，用户必须修复所有字段并启用提交按钮。

<!-- validation -->
<script language=JavaScript>

    function checkForm() {

    var err = 0;

    if (document.getElementById("fio").value == '') {
        document.getElementById("fio").style.border = "1px solid #FF0000";
        document.getElementById("fio_err").innerHTML = "Enter data";
        err = 1;
    }

    if (document.getElementById("_phone_top").value.length < 5) {
        document.getElementById("_phone_top").style.border = "1px solid #FF0000";
        document.getElementById("tel_err").innerHTML = "length < 5";
        err = 1;
    }

    var email = document.getElementById('email').value;
    emailTest = "^[_.0-9a-z-]+@([0-9a-z][0-9a-z_-]+.)+[a-z]{2,4}$";
    var regex = new RegExp(emailTest); 

    if (!regex.test(email)) {
        document.getElementById("email").style.border = "1px solid #FF0000";
        document.getElementById("email_err").innerHTML = "invalid e-mail";
        err = 1;
    }

    if ( err == 1 ) {
       document.getElementById('ok').setAttribute("disabled","disabled");
    } else {
       document.getElementById('ok').removeAttribute("disabled");
    }    
}

function setBorder(id) {

    document.getElementById(id).style.border = "1px solid #C0C0C0";
    document.getElementById(id+"_err").innerHTML = "";

}
</script>

<!-- Form -->
<form method="post" id="form_top" name="form_top" action="/mail.php">
    <input type="text" class="textbox" name="fio" id="fio" placeholder="NAME"><div id="fio_err"></div><br><br>
    <input type="text" class="textbox" name="tel" id="_phone_top" placeholder="PHONE"><div id="tel_err"></div><br><br>
    <input type="text" class="textbox" name="email" id="email" placeholder="E-Mail"><div id="email_err"></div><br><br>
    <input type="text" class="textbox" name="company" placeholder="COMP"><br><br>
    <input type="text" name="formfrom" value="верхняя форма" hidden>
    <input type="submit" class="textbox" name="ok" id="ok" value="Submit!" onmouseover="checkForm()"><br>
</form>

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

谢谢，禁用的按钮不支持触发鼠标悬停。我尝试在每个用户字段上使用 onblur 触发器，效果很好！

【讨论】：

【解决方案2】：

禁用的输入按钮不会触发 onmouseover : http://jsfiddle.net/djwasp4o/ 如果您手动从 html 中删除 disabled 属性，则会触发该事件。

此时，您禁用该事件：

document.getElementById('ok').setAttribute("disabled", "disabled");

参考见：Fire onmouseover event when element is disabled

【讨论】：