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

我使用HTML5来验证字段。我在点击按钮时使用JavaScript提交表单。但是HTML5验证不起作用。只有当输入类型为时，它才起作用。除了使用JavaScript验证或将类型更改为

submit

，我们还能做什么

这是HTML代码：

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

拯救

---

我正在函数

submitform（）

中提交表单，请尝试使用

执行

submitform（）

的功能，方法是执行

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

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

---

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

HTML5表单验证过程仅限于通过提交按钮提交表单的情况。明确地说，当通过

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

---

我可能会迟到，但我的做法是创建一个隐藏的提交输入，并在提交时调用它的单击处理程序。类似于（为了简单起见使用jquery）：

拯救
函数submitform（）{
$（“#提交_句柄”）。单击（）；
}

试试这个：

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

功能测试
{
提醒（“hello world”）；//像ajax一样在这里编写逻辑
}
名字：

姓氏：

电子邮件：

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

改变--

保存

到--

保存

我想添加一种新的方法来实现这一点，这是我最近遇到的。即使在使用

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>

或者不使用jQuery

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

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

下面是一个非常简单的JSFIDLE，展示了这个概念：

---

您可以将按钮类型更改为

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>

隐藏按钮
提交

2019更新：报告验证错误现在比接受答案的时间更容易，使用该时间不仅可以检查有效性，如

checkValidity（）

，还可以向用户报告验证错误

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

更新的解决方案代码段：

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

---

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

submitform（）

应该在表单标记中起作用，则返回false将不起作用。您在console中看到了什么错误，或者它只是提交表单而不执行其他验证？是的，它提交表单而不执行其他验证然后最好在

submitform（）中执行文本字段验证

由于html5的

必需

与submit按钮配合使用，这就是我所做的。有表单标签。我问除了使用submit按钮之外还有其他方法吗？我们可以在一个表单中使用两个按钮吗？它显示两个按钮的错误必填字段警报为什么？如何解决？@HTMLDeveloper，你应该用代码将你的问题作为一个新问题提出（并详细阐述它——我真的看不出你在问什么）。谢谢你的简单示例和解释，它对我很有用。

警报

可以简化为

警报（f.validationMessage）在代码示例中，以防循环：-）这对我来说很有效，但我如何在代码中检测到验证失败？这是因为我想在字段无效的情况下中断保存功能。感谢阅读问题“除了使用js验证或更改要提交的类型之外，我们还能做什么？”
function doFancyStuff() {
    $("#submit-button").click();
}

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

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

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

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