Question

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

<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>标签之外。

Answer 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();
}

Answer 2

试试这个：

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

Answer 3

我建议将表单中的<input>按钮隐藏起来（例如使用style="display:none;"）。

通过这种方式，您可以让<a>通过onclick提交表单，并保持验证（如果验证代码在表单中查找<input type="submit" />的某些原因，我不会感到惊讶）

更改按钮类型时丢失表单验证

3 个答案: