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;
    };
};

form.submit（）和HTML5验证

2 个答案: