0

我有一个表单，它验证使用从函数返回的布尔值选择了一个选项：

<form  id="checkoutForm" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" name="paypal">

我正在使用这个标准图像按钮提交表单：

<input name="submit" type="image"  src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" value="Checkout">

但是，我一直在更新并使用 CSS 按钮，所以提交表单如下：

 <a href="javascript:void(0)" style="float:right;" class="shopbutton" onclick="document.forms['checkoutForm'].submit();">Checkout with PayPal</a>

我可以像这样使用标准按钮：

<input name="submit" type="submit"  class="shopbutton" value="Checkout">

但这会给我带来一些其他小问题，我想知道如何确保表单使用其他方法进行验证？

TIA

编辑：我还应该提到，在使用<a href类型按钮时，该按钮是在<form>标签之外声明的。

4

3 回答 3

1

直接使用 javascript 提交表单onsubmit时，您正在绕过。这是为什么客户端验证不好的一个例子。

解决您的问题的一种方法是a像这样附加您的链接：

<a href="javascript:void(0)" style="float:right;" class="shopbutton" onclick="validateForm()">Checkout with PayPal</a>

然后只需在验证函数中添加一些错误计数，如果没有发现错误，则在函数内提交，如下所示：

function validateForm() {
    var errors = 0;
    if(inputFieldHere.value.length<3) errors++;
    if(errors) return false; //Or display some error or something
    else document.forms["checkoutForm"].submit();
}
于 2012-11-16T23:22:31.747 回答
1

尝试这个：

<!DOCTYPE html>
<html>
  <head>
    <title>element</title>
<script type="text/javascript">
  function checkme() {
        if (!document.form.agree.checked) {
            missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
            alert(missinginfo);
            return false;
        }
        else {
            alert("Text information");
            return true;
        }
    }

  function submit_form()
  {
        if(checkme() == true)
        {
            document.forms["form"].submit();
        }
  }
</script>
  </head>

  <body>
    <form name="form" id="form" method="post" action="#" onSubmit="return checkme();">
      <input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
      <label for="agree">&nbsp;I&acute;ve read terms and conditions and I&acute;m ready to shop</label>
      <input type="submit" name="btnSubmit" value="Submit" class="submit">
    </form>
    <a href="#" style="float:right;" class="shopbutton" onclick="submit_form();">Submit form</a>
  </body>
</html>
于 2012-11-16T23:30:02.823 回答
0

我建议将<input>表单内的按钮保持为隐藏状态（例如，使用style="display:none;"）。

这样，您可以继续使用 onclick 提交表单，并保持验证到位（如果验证代码出于某种原因在表单内部<a>查找，我不会感到惊讶）<input type="submit" />

于 2012-11-16T23:14:14.153 回答