Html 输入类型不是“提交”时的 HTML5 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16707743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 validation when the input type is not "submit"
提问by I'm nidhin
I'm using HTML5 for validating fields. I'm submitting the form using JavaScript on a button click. But the HTML5 validation doesn't work. It works only when then input type is submit. Can we do anything other than using JavaScript validation or changing the type to submit?
我正在使用 HTML5 来验证字段。我正在通过单击按钮使用 JavaScript 提交表单。但是 HTML5 验证不起作用。它仅在输入类型为submit. 除了使用 JavaScript 验证或将类型更改为 之外，我们还能做任何事情submit吗？
This is the HTML code:
这是 HTML 代码：
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
I'm submitting the form in the function submitform().
我在函数中提交表单submitform()。
回答by Jukka K. Korpela
The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithmexplicitly says that validation is not performed when the form is submitted via the submit()method. Apparently, the idea is that if you submit a form via JavaScript, you are supposed to do validation.
HTML5 表单验证过程仅限于通过提交按钮提交表单的情况。该表单提交算法明确地说，当窗体通过提交不进行验证的submit()方法。显然，这个想法是，如果您通过 JavaScript 提交表单，则应该进行验证。
However, you can request (static) form validation against the constraints defined by HTML5 attributes, using the checkValidity()method. If you would like to display the same error messages as the browser would do in HTML5 form validation, I'm afraid you would need to check all the constrained fields, since the validityMessageproperty is a property of fields (controls), not the form. In the case of a single constrained field, as in the case presented, this is trivial of course:
但是，您可以使用checkValidity()方法针对 HTML5 属性定义的约束请求（静态）表单验证。如果您想显示与浏览器在 HTML5 表单验证中所做的相同的错误消息，恐怕您需要检查所有受约束的字段，因为该validityMessage属性是字段（控件）的属性，而不是表单。在单个受约束字段的情况下，如所呈现的情况，这当然是微不足道的：
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.checkValidity()) {
f.submit();
} else {
alert(document.getElementById('example').validationMessage);
}
}
回答by Bekodo
I may be late, but the way I did it was to create a hidden submit input, and calling it's click handler upon submit. Something like (using jquery for simplicity):
我可能会迟到，但我这样做的方法是创建一个隐藏的提交输入，并在提交时调用它的点击处理程序。类似于（为简单起见使用 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>
回答by Vishwanath
You should use form tag enclosing your inputs. And input type submit.
This works.
您应该使用包含输入的表单标签。和输入类型提交。
这有效。
<form id="testform">
<input type="text" id="example" name="example" required>
<button type="submit" onclick="submitform()" id="save">Save</button>
</form>
Since HTML5 Validation works only with submit button you have to keep it there. You can avoid the form submission though when valid by preventing the default action by writing event handler for form.
由于 HTML5 验证仅适用于提交按钮，因此您必须将其保留在那里。您可以通过为表单编写事件处理程序来阻止默认操作，从而避免表单提交。
document.getElementById('testform').onsubmit= function(e){
e.preventDefault();
}
This will give your validation when invalid and will not submit form when valid.
这将在无效时进行验证，并且在有效时不会提交表单。
回答by Blunderfest
I wanted to add a new way of doing this that I just recently ran into. Even though form validation doesn't run when you submit the form using the submit()method, there's nothing stopping you from clicking a submit button programmatically. Even if it's hidden.
我想添加一种我最近遇到的新方法。即使在您使用该submit()方法提交表单时表单验证不会运行，也不会阻止您以编程方式单击提交按钮。哪怕是隐藏的。
Having a form:
有一个表格：
<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>
This will trigger form validation:
这将触发表单验证：
function doFancyStuff() {
$("#submit-button").click();
}
Or without jQuery
或者没有 jQuery
function doFancyStuff() {
document.getElementById("submit-button").click();
}
In my case, I do a bunch of validation and calculations when the fake submit button is pressed, if my manual validation fails, then I know I can programmatically click the hidden submit button and display form validation.
就我而言，当按下假提交按钮时，我会进行大量验证和计算，如果我的手动验证失败，那么我知道我可以以编程方式单击隐藏的提交按钮并显示表单验证。
Here's a VERY simple jsfiddle showing the concept:
这是一个非常简单的 jsfiddle 展示了这个概念：
回答by Hymanson Abraham
Either you can change the button type to submit
您可以将按钮类型更改为 submit
<button type="submit" onclick="submitform()" id="save">Save</button>
Or you can hide the submit button, keep another button with type="button" and have click event for that button
或者您可以隐藏提交按钮，保留另一个 type="button" 的按钮并为该按钮设置单击事件
<form>
<button style="display: none;" type="submit" >Hidden button</button>
<button type="button" onclick="submitForm()">Submit</button>
</form>
回答by Ahmed
Try with <button type="submit">you can perform the functionality of submitform()by doing <form ....... onsubmit="submitform()">
试试<button type="submit">你可以submitform()通过做 来执行的功能<form ....... onsubmit="submitform()">
回答by Laurent
2019 update: Reporting validation errors is now made easier than a the time of the accepted answer by the use of HTMLFormElement.reportValidity()which not only checks validity like checkValidity()but also reports validation errors to the user.
2019 年更新：通过使用HTMLFormElement.reportValidity()不仅检查有效性，checkValidity()而且还向用户报告验证错误，现在报告验证错误比接受答案的时间更容易。
The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
如果元素的子控件满足其验证约束，则 HTMLFormElement.reportValidity() 方法返回 true。当返回 false 时，会为每个无效子项触发可取消的无效事件，并向用户报告验证问题。
Updated solution snippet:
更新的解决方案片段：
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.reportValidity()) {
f.submit();
}
}
回答by Sorav Garg
HTML5 Validation Work Only When button type will be submit
HTML5 验证仅在提交按钮类型时工作
change --
改变 -
<button type="button" onclick="submitform()" id="save">Save</button>
To --
到 -
<button type="submit" onclick="submitform()" id="save">Save</button>
回答by Sumeet Patil
Try this out:
试试这个：
<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>
