javascript：在提交之前验证表单？答案

【问题标题】：javascript: validate form before submit?javascript：在提交之前验证表单？
【发布时间】：2015-01-13 09:32:11
【问题描述】：

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

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

“有一个错误”

我有三个不同的 div，div1 div2 和 div3，其中包含错误语句。我这样做是因为我将表格分为三个部分。因此，我希望我的 javascript 对表单中的三个不同部分执行三种不同的检查，如果哪个部分发生错误，则显示该部分的 div1 或 div 2 或 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>

【问题讨论】：

可能重复：HTML/Javascript: Simple form validation on submit 但要尝试提供帮助，请确保您实际上是使用<form> 标记本身上的onSubmit HTML 属性执行验证代码。
您可以在提交表单事件时调用此方法并执行 e.preventDefault() ，然后验证代码，然后 document.form.submit();或 document.
.submit();
@Innovation 谢谢，但我试过了，表单仍然提交没有任何区别
请缓存document.forms["register"]，而不是一直重复自己……
提供您的 html 代码。

标签： javascript forms

【解决方案1】：

在表单标签中有一个字段onsubmit 来指定您的验证功能。类似的东西：

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

</form>

【讨论】：

【解决方案2】：

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

如果您正在单击提交按钮，请首先检查所有字段，如果您的验证失败，请提出event.preventDefault()。这样，这将阻止表单提交。

如果没有错误，preventDefault 将不会被提出并提交表单。

额外信息： jQuery API

【讨论】：

谢谢我尝试添加，但仍然没有阻止表单提交