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

Posted 2023-03-05

【中文标题】输入类型不是“提交”时的 HTML5 验证

【英文标题】：HTML5 validation when the input type is not "submit"

【发布时间】：2013-05-18 10:44:57

【问题描述】：

我正在使用 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()函数中提交表单。

【参考方案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);
  

【讨论】：

我们可以在一个表单中使用两个按钮吗？它显示两个按钮的错误必填字段警报为什么？如何解决？

@HTMLDeveloper，您应该使用代码将您的问题作为一个新问题提出（并更详细地表述它——我真的看不出您在这里问什么）。

感谢简单的示例和解释，它对我有用。 alert 可以在代码示例中简化为 alert(f.validationMessage);，以防您循环使用:-)

【参考方案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>

【讨论】：

这对我有用，但我如何在代码中检测到验证失败？那是因为我想在无效字段的情况下中断保存功能。谢谢

【参考方案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();

这将在无效时为您提供验证，并且在有效时不会提交表单。

【讨论】：

这就是我所做的。有表单标签。我问除了使用提交按钮之外还有什么方法

【参考方案4】：

我想添加一种我最近遇到的新方法。即使当您使用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/

【讨论】：

请阅读问题“除了使用 js 验证或更改提交类型之外，我们还能做其他事情吗？”

【参考方案5】：

尝试使用<button type="submit">，您可以通过执行<form ....... onsubmit="submitform()"> 来执行submitform() 的功能

【讨论】：

@Ahmed。这在我的情况下不起作用。如果按钮类型是提交，HTML5 验证将起作用。但我有许多其他 js 验证，因此如果按钮返回 false 将不起作用类型是提交

submitform() 应该在表单标签中工作。您在控制台中看到什么错误，或者只是提交表单而不执行其他验证？

是的，它提交表单而不执行其他验证

那么最好在submitform() 中执行文本字段验证，因为html5 的required 与提交按钮一起使用

【参考方案6】：

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

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

或者您可以隐藏提交按钮，保留另一个带有 type="button" 的按钮并为该按钮设置点击事件

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

【参考方案7】：

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

如果元素的子控件满足其验证约束，则 HTMLFormElement.reportValidity() 方法返回 true。当返回 false 时，会为每个无效子节点触发可取消的无效事件，并向用户报告验证问题。

更新解决方案sn-p：

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

【参考方案8】：

HTML5 验证仅在按钮类型将被提交时工作

改变--

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

到--

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

【参考方案9】：

试试这个：

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