JS form validation, activate submit button if all field correct

Question

I have troubles with JS form validation. I use regular expressions. If all fields user fill correct, then submit button in form is active (onmouseover), but when one of fields is incorrect, submit button is disabled. When user filled all fields correct - submit button stand still disabled, can you help me fix this problem? As the result, user fix all fields and submit button must be enabled.

<!-- 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>

score 0 · Answer 1 · answered Jan 03 '15 at 19:19

0

Thanks, disabled button doesn't support trigger onmouseover. I try to use onblur trigger on every user field, it's work perfectly!

answered Jan 03 '15 at 19:19

LAvex

3
2

score -1 · Accepted Answer · edited May 23 '17 at 11:57

-1

A disabled input button does not trigger onmouseover : http://jsfiddle.net/djwasp4o/ if you remove the disabled attribute from the html manually, the event will be triggered.

At that point, you disable the event :

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

For reference, see : Fire onmouseover event when element is disabled

edited May 23 '17 at 11:57

Community

1
1

answered Jan 03 '15 at 14:09

sodawillow

12,497
4
34
44

JS form validation, activate submit button if all field correct

2 Answers2