Question

我正在使用HTML5来验证字段。我在点击按钮时使用JavaScript提交表单。但HTML5验证不起作用。它仅在输入类型为submit时有效。我们可以做除了使用JavaScript验证或将类型更改为submit之外的任何其他内容吗？

这是HTML代码：

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>

我在函数submitform()中提交表单。

Answer 1

HTML5表单验证过程仅限于通过提交按钮提交表单的情况。 Form submission algorithm明确表示在通过submit()方法提交表单时不会执行验证。显然，我们的想法是，如果您通过JavaScript提交表单，则应该进行验证。

但是，您可以使用checkValidity()方法针对HTML5属性定义的约束请求（静态）表单验证。如果您希望显示与浏览器在HTML5表单验证中所做的相同的错误消息，我担心您需要检查所有受约束的字段，因为validityMessage属性是字段（控件）的属性而不是形式。在单个约束字段的情况下，如所示的情况，这当然是微不足道的：

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.checkValidity()) {
    f.submit();
  } else {
    alert(document.getElementById('example').validationMessage);
  }
}

Answer 2

我可能会迟到，但我这样做的方法是创建一个隐藏的提交输入，并在提交时调用它的点击处理程序。像（简单地使用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>

Answer 3

您应该使用包含输入的表单标记。输入类型提交。
这很有效。

<form id="testform">
<input type="text" id="example" name="example"  required>
<button type="submit"  onclick="submitform()" id="save">Save</button>
</form>

由于HTML5验证仅适用于提交按钮，因此您必须将其保留在那里。您可以通过为表单编写事件处理程序来阻止默认操作，从而避免表单提交有效。

document.getElementById('testform').onsubmit= function(e){
     e.preventDefault();
}

这将在无效时进行验证，并且在有效时不会提交表单。

Answer 4

尝试使用<button type="submit">，您可以submitform()

执行<form ....... onsubmit="submitform()">的功能

Answer 5

我想添加一种新方法，这是我刚刚遇到的。即使使用submit()方法提交表单时表单验证没有运行，也没有什么能阻止您以编程方式单击提交按钮。即使它被隐藏了。

有表格：

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

这将触发表单验证：

function doFancyStuff() {
    $("#submit-button").click();
}

或没有jQuery

function doFancyStuff() {
    document.getElementById("submit-button").click();
}

在我的情况下，当按下虚假提交按钮时，我会进行一系列验证和计算，如果我的手动验证失败，那么我知道我可以通过编程方式单击隐藏的提交按钮并显示表单验证。

这是一个非常简单的jsfiddle，显示了这个概念：

https://jsfiddle.net/45vxjz87/1/

Answer 6

您可以将按钮类型更改为submit

<button type="submit"  onclick="submitform()" id="save">Save</button>

或者你可以隐藏提交按钮，保留另一个类型=＆＃34;按钮＆＃34;并为该按钮点击事件

<form>
    <button style="display: none;" type="submit" >Hidden button</button>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

Answer 7

HTML5验证仅在提交按钮类型时

改变 -

<button type="button"  onclick="submitform()" id="save">Save</button>

到 -

<button type="submit"  onclick="submitform()" id="save">Save</button>

Answer 8

试试这个：

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

Answer 9

2019年更新：通过使用HTMLFormElement.reportValidity()，报告验证错误现在比接受答案的时间更容易，它不仅检查checkValidity()之类的有效性，而且还向用户报告验证错误。

如果元素的子控件满足其验证约束，则HTMLFormElement.reportValidity（）方法将返回true。返回false时，将为每个无效孩子触发可取消的无效事件，并将验证问题报告给用户。

更新的解决方案代码段：

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.reportValidity()) {
    f.submit();
  }
}

输入类型不是“提交”时的HTML5验证

9 个答案: