javascript:提交前验证表单？

Question

我真的很感激任何人的帮助,因为我似乎无法让它工作.我在提交之前使用javascript代码检查我的表单.我检查空盒子之类的东西.

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

"有一个错误"

我有三个不同的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>

Answer 1

在表单标记中,有一个字段onsubmit指定您的验证功能.像这样的东西:

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

</form>

Answer 2

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

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

如果没有错误，则preventDefault不会提出问题并提交表格。

额外信息： jQuery API