在提交前验证表单的JavaScript代码？

Question

我真的很感激任何人对此的帮助，因为我似乎无法使它工作。 我正在使用javascript代码在提交表单之前检查表单。 我检查空框之类的东西。

如果框为空，则应显示包含标准错误文本的三个div中的一个。

"There was an error"

我有三个不同的div，即div1，div2和div3，其中包含错误语句。 我这样做是因为我将我的表单分成三个部分。 因此，我希望我的javascript对我的表单中的三个不同部分执行三个不同的检查，并且如果发生错误，则为该部分显示div1或div2或div3。

Section 1 
<div 1>
<input = firstname>
<input = lastname>
<input = email>
<input = email2>

section 2
<div 2>
<input = contactnum>
<input = mobnum>
<input = postcode>

section 3
<div 3>
<input = compname>
<input = compreg>

这是我的JavaScript代码，我正在尝试组合它，但它不起作用，它提交表单而不进行任何检查。请问有人可以告诉我我错在哪里吗？

<script>
    function validateForm() {
        var a = document.forms["register"]["firstname"].value;
        var b = document.forms["register"]["lastname"].value;
        var c = document.forms["register"]["email"].value;
        var d = document.forms["register"]["email2"].value;
        if (a == null || a == "" || b == null || b == "" || c == null || c == ""|| d == null || d == "") {
            $(".form_error").show();
            $('html,body').animate({
               scrollTop: $(".form_error").offset().top - 180 
            });


            var e = document.forms["register"]["contactnum"].value;
            var f = document.forms["register"]["mobnum"].value;
            var g = document.forms["register"]["postcode"].value;
            if (e == null || e == "" || f == null || f == "" || g == null || g == "") {
                $(".form_error").show();
                $('html,body').animate({
                     scrollTop: $(".form_error").offset().top - 180 
                });


                var h = document.forms["register"]["compname"].value;
                var i = document.forms["register"]["compreg"].value;
                if (h == null || h == "" || i == null || i == "") {
                    $(".form_error").show();
                    $('html,body').animate({
                        scrollTop: $(".form_error").offset().top - 180 
                    });

                    return false;
                }   
            }
        }
    }
 </script>

- James Daley

---

可能是重复问题：HTML/Javascript: Simple form validation on submit。但是为了帮助您，确保使用<form>标签本身的onSubmit HTML属性来执行验证代码。 - Brandon Anzaldi

你可以在表单提交事件 onsubmit 上调用此方法，然后执行 e.preventDefault()，之后验证代码并使用 document.form.submit(); 或 document.<form name>.submit(); 提交表单。 - Innovation

@Innovation 谢谢，但我尝试过了，没有任何改变，表单仍然会提交。 - James Daley

请缓存 document.forms["register"]，而不是重复多次自己... - RobG

请提供您的HTML代码。 - Innovation

Answer 1

在表单标签中有一个字段 onsubmit，用于指定验证函数。类似这样：

<form name="myForm" onsubmit="return validateForm()" method="post">
    <!-- your inputs -->

</form>

- Quentin Morrier

Answer 2

在检查错误时，您应该在if语句中使用event.preventDefault();。

如果您单击提交按钮，请先检查所有字段，如果验证失败，则触发event.preventDefault()。这样，将防止表单提交。

如果没有错误，则不会触发preventDefault，并且表单将被提交。

额外信息： jQuery API

- brammekuhh

---

谢谢，我尝试添加了那个，但仍然无法阻止表单提交。 - James Daley