inputtypes不是“提交”时的HTML5validation
我正在使用HTML5validation字段。 我点击button，使用JavaScript提交表单。 但是HTML5validation不起作用。 它只有在inputtypes被submit时才起作用。 除了使用JavaScriptvalidation或更改submittypes之外，我们可以做其他事吗？
这是HTML代码：
<input type="text" id="example" name="example" value="" required> <button type="button" onclick="submitform()" id="save">Save</button>
我在提交函数submitform()提交表单。
HTML5表单validation过程仅限于通过提交button提交表单的情况。 表单提交algorithm明确指出，当通过submit()方法submit()表单时，不会执行validation。 显然，这个想法是，如果你通过JavaScript提交表单，你应该做validation。
但是，您可以使用checkValidity()方法针对HTML5属性定义的约束请求（静态）表单validation。 如果您希望显示与浏览器在HTML5表单validation中一样的错误消息，恐怕您需要检查所有受限字段，因为validityMessage属性是字段（控件）的属性，而不是表单。 在一个单一的约束领域的情况下，如所示，这当然是微不足道的：
function submitform() { var f = document.getElementsByTagName('form')[0]; if(f.checkValidity()) { f.submit(); } else { alert(document.getElementById('example').validationMessage); } }
我可能会迟到，但我做的方式是创build一个隐藏的提交input，并在提交时调用它的点击处理程序。 就像（使用jQuery的简单）：
<input type="text" id="example" name="example" value="" required> <button type="button" onclick="submitform()" id="save">Save</button> <input id="submit_handle" type="submit" style="display: none"> <script> function submitform() { $('#submit_handle').click(); } </script>
你应该使用表单标签封闭你的input。 并inputtypes提交。
这工作。
<form id="testform"> <input type="text" id="example" name="example" required> <button type="submit" onclick="submitform()" id="save">Save</button> </form>
由于HTML5validation仅适用于提交button，因此您必须将其保留在那里。 您可以通过为表单编写事件处理程序来阻止默认操作，从而避免在有效时提交表单。
document.getElementById('testform').onsubmit= function(e){ e.preventDefault(); }
这将使您的validation无效，不会提交时有效的forms。
你可以通过<form ....... onsubmit="submitform()">来执行submitform()的function。
仅HTML5validation工作当提交buttontypes时
改变 –
<button type="button" onclick="submitform()" id="save">Save</button>
至 –
<button type="submit" onclick="submitform()" id="save">Save</button>
试试这个：
<script type="text/javascript"> function test { alert("hello world"); //write your logic here like ajax } </script> <form action="javascript:test();" > firstName : <input type="text" name="firstName" id="firstName" required/><br/> lastName : <input type="text" name="lastName" id="lastName" required/><br/> email : <input type="email" name="email" id="email"/><br/> <input type="submit" value="Get It!" name="submit" id="submit"/> </form>
我想添加一个新的方法来做到这一点，我刚刚遇到。 即使表单validation在您使用submit()方法提交表单时没有运行，也不会阻止您以编程方式单击提交button。 即使它是隐藏的。
有一个表格：
<form> <input type="text" name="title" required /> <button style="display: none;" type="submit" id="submit-button">Not Shown</button> <button type="button" onclick="doFancyStuff()">Submit</button> </form>
这将触发表单validation：
function doFancyStuff() { $("#submit-button").click(); }
或者没有jQuery
function doFancyStuff() { document.getElementById("submit-button").click(); }
在我的情况下，当按下假提交button时，我做了一堆validation和计算，如果我的手动validation失败，那么我知道我可以以编程方式单击隐藏的提交button并显示表单validation。
这里有一个非常简单的jsfiddle来展示这个概念：
