【问题标题】:Why is my form not validating onsubmit?为什么我的表单在提交时没有验证?
【发布时间】:2013-01-20 05:06:23
【问题描述】:

我是 javascript 新手,正在尝试获取它,以便当用户未填写我表单上的所有字段时,他们会收到警报错误。

这是我表单的第一行,告诉它在提交时验证我的功能...

<form accept-charset="UTF-8" action="xxxx" class="infusion-form" method="POST" name="myform" onsubmit="return validateForm();">

这是我的 javascript 函数...

<script type="text/javascript">// <![CDATA[
function validateForm() {
    var a = document.forms["myform"]["inf_field_FirstName"].value;
    var b = document.forms["myform"]["inf_field_Email"].value;
    var c = document.forms["myform"]["inf_field_Phone1"].value;
    var d = document.forms["myform"]["inf_field_StreetAddress1"].value;
    var e = document.forms["myform"]["inf_field_City"].value;
    var f = document.forms["myform"]["inf_field_State"].value;
    var g = document.forms["myform"]["inf_field_PostalCode"].value;
    var h = document.forms["myform"]["inf_other_Username"].value;
    var i = document.forms["myform"]["inf_other_Password"].value;
    var j = document.forms["myform"]["inf_other_RetypePassword"].value;

    if (a == null || a == "" || a == "First Name Here") {
        alert("Please enter your First Name!");
        return false;
    }
    if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
        alert("Please insert your phone number!");
        return false;
    }
    if (d == null || d == '' || d == "Street Address") {
        alert("Please insert your street address ");
        return false;
    }
if (e == null || e == '' ||e == "City") {
        alert("Please insert your city");
        return false;
    }

    if (f == null || f == '' || f == "State") {
        alert("Please insert your state ");
        return false;
    }

if (g == null || g == '' ||g == "Postal Code") {
        alert("Please insert your postal code");
        return false;
    }
    if (h == null || h == '' || h == "Username") {
        alert("Please insert your username ");
        return false;
    }
if (i == null || i == '' ||i == "password") {
        alert("Please insert your password");
        return false;
    }
    if (j == null || j == '' || j == "password") {
        alert("Please re - type your password ! ");
        return false;
    }




    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
        alert("Please enter a valid email address.");
        return false;
    }
}
// ]]>
</script>

我不确定我做错了什么?非常感谢您的帮助。如果您想检查元素,页面也位于http://business.uglyopportunities.com/affiliate-signup/(表单位于页面底部)

谢谢

【问题讨论】:

  • 你能把你完整的html表单代码部分贴出来
  • 不是问题,但您应该能够删除那些x == null 测试,因为.value 属性不应该返回null。仔细检查字段名称 - 如果其中有一个拼写错误,那么(显然)将找不到它,然后尝试访问其 .value 属性将导致错误。
  • nitpick:单字母变量名不好!将document.forms["myform"] 的引用存储到变量中并将其用作查找。例如var frm = document.forms["myform"]; var fName = frm["inf_field_FirstName"].value; 输入的值也不会为空。

标签: javascript forms function validation onsubmit


【解决方案1】:

您在表单之后在 javascript 中声明 validateForm。尝试将其移至表格之前。或者更好的是,在您的页面顶部。

了解如何使用 javascript 调试器。您会立即发现这一点(调用 validateForm 时会引发错误)。 http://www.youtube.com/watch?v=54IgWgoFToc

【讨论】:

  • 我可能会在 &lt;head&gt; 中声明该函数,但在哪里声明该函数并不重要,因为它可能在整个页面加载之前都不会被调用(鉴于提交事件 - 大概是 - 响应用户点击某物)。也就是说,在触发onclick 时,该函数将存在。
  • 您好,非常感谢 mrtsherman 我尝试将脚本放在表单之前,但这不起作用。然而,当我把它放在头部标签中时,它现在就像一个魅力,非常感谢你的时间。
猜你喜欢
  • 1970-01-01
  • 2014-04-08
  • 1970-01-01
  • 2014-04-13
  • 1970-01-01
  • 2016-07-08
  • 1970-01-01
相关资源
最近更新 更多