javascript验证无法在具有多个表单的页面上工作

时间:2014-04-01 01:45:15

标签: javascript html forms validation

javascript未验证"优惠券"上的字段形成。如果某个字段为空,则应将其发送到错误页面。就像现在一样,您可以将名字和姓氏留空,并输入您的电子邮件地址以获取优惠券。只有电子邮件地址表单正在验证。以下是我目前的代码。该表格是代码的一半左右的namath-coupon形式。

<script type="text/javascript">

function validate-coupon-form()
{

   if (document.subscribeForm.First_Name.value == "")
   {
      alert("Please enter your First Name");
      document.subscribeForm.First_Name.focus();
      return false;
   }

   if (document.subscribeForm.Last_Name.value == "")
   {
      alert("Please enter your Last Name");
      document.subscribeForm.Last_Name.focus();
      return false;
   }

   if (document.subscribeForm.Email Address.value == "")
   {
      alert("Please enter your Email Address");
      document.subscribeForm.Email Address.focus();
      return false;
   }

   return( true );

}


</script>



        <div class="namath-coupon-form-header">

        <form class="namath-coupon-form" action="http://cl.exct.net/subscribe.aspx?lid=7549071" name="subscribeForm" method="post" onSubmit="return validate-coupon-form();">
            <input type="hidden" name="thx" value="http://www.namathproducts.com/get-coupons-thank-you">
            <input type="hidden" name="err" value="http://www.namathproducts.com/get-coupons-error">
            <input type="hidden" name="MID" value="10692030">
            <input type="hidden" name="Email Type" value="HTML" checked>
            <input type="hidden" name="BU_Namath" value="TRUE" checked>
            <input type="hidden" name="SubAction" value="sub_add_update" checked>
            <label for="FirstName">
                <span>First Name *</span>
                <input type="text" class="required" name="First_Name" id="FirstName" >
            </label><br>

            <label for="LastName">
                <span>Last Name *</span>
            <input type="text" class="required" name="Last_Name" id="LastName" >
            </label><br>

            <label for="EmailAddress">
                <span>Email *</span>
                <input type="text" class="required" name="Email Address" id="EmailAddress" placeholder="name@example.com" >
            </label><br>

            <label>
                <span>&nbsp;</span>
                <input type="submit" class="button" name="Submit" value="GET COUPON">
            </label>
        </form>
    </div>     

页眉和页脚附近的表单正在验证。

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

你必须忽略很多错误。连字符在ECMAScript标识符中无效,因此您必须将它们从函数和变量名称中删除(例如,将 validate-coupon-form 更改为 validateCouponForm )。

您有三个名称为 subscribeForm 的表单,因此 document.subscribeForm 将返回所有三种表单的集合,document.subscribeForm.First_Name.value应该抛出错误。< / p>

要避免这种情况,请将侦听器更改为

<form ... name="subscribeForm" onSubmit="return validateCouponForm(this);" ...>

以便将对表单的引用直接传递给函数,然后在函数中使用 form 来引用表单

function validateCouponForm(form) {

  if (form.First_Name.value == "") {
    ...
  }
  ...
}