form.submit() 和 HTML5 验证

Question

由于设计原因，我不能使用

<input type="submit" />

提交表单。相反，代码如下：

<a onclick="form.submit()"></a>

表单包含带有

的元素

required="required"

属性。不幸的是，HTML5 验证不能以这种方式工作。不过，它可以与常规提交按钮一起正常工作。

关于为什么的任何想法？有没有办法在不使用提交按钮的情况下触发 HTML5 验证？

根据您的要求编辑：

<form name="form" method="post" action="https://pilot.datatrans.biz/upp/jsp/getCcAliasFormMod.jsp" id="form_payment_cc" name="uppform">
<label for"cvv">CVV</label><br />
<input type="text" size="4" id="cvv" name="cvv" value="" required="required" />
<p></p>
<div class="order">
    <div></div> <div><a href="#" onclick="javascript:$( '#form_payment_cc' ).submit();"><img src="/images/pfeil_orange.png" style="margin-left: 30px;"><strong>Weiter</strong></a></div>
    </div>
<input type="hidden" id="form__token" name="form[_token]" value="LaBK9OAZyhjENzWmCiCokS0kGXgFmbPNm7v1lo1LuRs" />
</form>

Answer 1

你可以试试<a onclick="if(form.checkValidity()) form.submit()"></a>

尽管使用 CSS 来应用您的自定义设计并使用原生按钮可能会更好。

更新：

似乎需要一个常规按钮来触发本机验证。所以一个可能的解决方案是使用隐藏按钮并使用 JS 触发点击：

<form>
  <input name="email" type="email" title="Enter your email" required />
  <input id="sumbitBtn" type="submit" style="position: absolute; left: -9999px" /> 
  <a href="#" onclick="document.getElementById('sumbitBtn').click();">Submit</a>
</form>

对于基于 CSS 的解决方案（无需 JS），使用常规按钮检查 this fiddle

Answer 2

如果您想显示某些浏览器（例如 Chrome）的本机错误消息，不幸的是，唯一的方法是提交表单，如下所示：

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

然后：

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};