javascript：提交之前验证表单？ [英] javascript: validate form before submit?

问题描述

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

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

有一个错误

我有三个不同的div，div1 div2和div3包含错误语句。我这样做是因为我把表格分成了三部分。因此，我希望我的JavaScript对我的表单中的三个不同部分执行三种不同的检查，并且如果发生了错误，在哪个部分中显示div1或div2或div3。

 第1部分
< div 1> 
< input = firstname> 
< input = lastname> 
< input = email> 
< input = email2> 
 
第2款
< div 2> 
< input = contactnum> 
< input = mobnum> 
< input = postcode> 
 
第3款
< div 3> 
< input = compname> 
< input = compreg> 
  

这里是我的javascript代码，我试图放在一起，但它不工作，它提交了没有做任何检查。请问有人可以告诉我我要去哪儿出错。

 < script> 
函数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）显示（）; 
 $（'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 
}）; 
 
返回false; 
} 
} 
} 
 
< / script> 
  

解决方案

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

 < form name =myFormonsubmit =return validateForm（）method = 后 > 
 <！ - 您的输入 - > 
 
< / form> 
  

I would really appreciate anyone's help with this as I just can't seem to get it working. I am using a javascript code to check my form before it is submitted. I check for things like empty boxes.

If boxes are empty then this should display a one of three divs which contains a standard error text.

"There was an error"

I have three different divs, div1 div2 and div3 which contain error statements. I have done this because I have divided my form into three sections. Therefore I want my javascript to perform three different checks on the three different sections in my form and if a error has occurred in which ever section then display div1 or div 2 or div3 for that section.

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>

here is my javascript code I am trying to put together but its not working, it submits the form without doing any checks. please can someone show me where I am going wrong.

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

解决方案

In the form tag there is a field onsubmit to specify your validation function. Something like that:

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

</form>

这篇关于javascript：提交之前验证表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！