在不使用提交按钮的情况下触发标准 HTML5 验证（表单）？
Posted
技术标签:
【中文标题】在不使用提交按钮的情况下触发标准 HTML5 验证（表单）？【英文标题】：Trigger standard HTML5 validation (form) without using submit button? 【发布时间】：2011-10-23 13:16:21 【问题描述】：谁知道如何在不使用提交按钮的情况下触发表单中的标准 html5 验证？ （javascript 或 jQuery）。
我确实不想发送POST/GET请求，只做验证。
【问题讨论】：
html5 form validation, void form action and execute jQuery when all html5 form elements are validated? 的可能重复项 【参考方案1】：经过一番研究，我想出了以下代码，应该可以回答您的问题。 （至少它对我有用）
首先使用这段代码。 $(document).ready 确保在将表单加载到 DOM 时执行代码：
$(document).ready(function()
$('#theIdOfMyForm').submit(function(event)
if(!this.checkValidity())
event.preventDefault();
);
);
然后只需在您的代码中调用$('#theIdOfMyForm').submit();。
更新
如果您真的想在表单中显示用户的哪个字段有误，请在event.preventDefault(); 之后添加以下代码
$('#theIdOfMyForm :input:visible[required="required"]').each(function()
if(!this.validity.valid)
$(this).focus();
// break
return false;
);
它将关注第一个无效输入。
【讨论】：
自发布此答案以来，jQuery .each 函数已更改（？）。它现在有两个稍微令人困惑的排列。上面使用的 .each 将不再起作用。我会使用： var $list = $(f).find(':input:visible[required="required"]'); $.each($list,function(idx,el) 删除！从 if 语句。这对我来说打破了它。【参考方案2】：您可以使用reportValidity，但是它对浏览器的支持还很差。它适用于 Chrome、Opera 和 Firefox，但不适用于 IE、Edge 或 Safari：
var myform = $("#my-form")[0];
if (!myform.checkValidity())
if (myform.reportValidity)
myform.reportValidity();
else
//warn IE users somehow
（checkValidity 有更好的支持，但在 IE
【讨论】：
一年后，根据Can I Use:caniuse.com/#feat=constraint-validation，所有四大浏览器的最新版本都支持这个【参考方案3】：this question 的已接受答案似乎是您正在寻找的。
简短总结：在提交的事件处理程序中，调用event.preventDefault()。
【讨论】：
这并没有为我解决。使用 Chrome 27，当我阻止默认设置时，它也会跳过 HTML5 验证【参考方案4】：您必须提交表单才能使 html5 验证生效。有一种方法可以得到你想要的。看代码：
<body>
<h1>Validation Example</h1><br />
<h2>Insert just 1 digit<h2>
<form id="form" onsubmit="return false">
<label>Input<input type="text" pattern="[0-9]" id="input" /></label>
<input type="submit" class="hide" id="inputButton">
</form>
</body>
看一个例子here
注意：使用 form.submit() 对我不起作用。所以我创建了一个隐藏的提交按钮，它在 keyup 上触发。不要问我为什么。也许有人可以澄清一下。
【讨论】：
【参考方案5】：这是我对@mhm 建议的解决方案的实现，我放弃了对 jQuery 的使用。
变量 formId 包含表单的 id，msg 是一个包含我的应用程序消息的对象。
此实现尝试使用本机 HTML 5 错误消息通知用户，如果不可能，则警告通用表单错误消息。
如果没有错误，我会提交表单。
let applyForm = document.getElementById(formId);
if (!applyForm.checkValidity())
if (applyForm.reportValidity)
applyForm.reportValidity();
else
alert(msg.ieErrorForm);
else
applyForm.submit();
【讨论】：
【参考方案6】：简短的回答，不，在提交表单之前无法“触发”内联 html5 气泡的默认功能，您可以在某些输入上 checkValidity()，但同样无法按您的意愿工作。如果您在验证完成后仍想提交表单，则不阻止默认设置，您仍然可以通过执行以下操作来处理此样式：
注意，在您不希望应用验证 css 样式的表单上，您可以简单地将 novalidate 属性添加到表单。
HTML：
<form name="login" id="loginForm" method="POST">
<input type="email" name="username" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="LOG IN" class="hero left clearBoth">
</form>
如果您不使用 SCSS，我强烈建议您研究一下，它更易于管理、易于编写且不那么复杂。注意：在小提琴示例中，我确实有这将编译的确切 css。我还包含了一个气泡样式示例。
SCSS：
form:not([novalidate])
input, textarea
&:required background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;
&:required:valid background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;
&:not(:focus):valid box-shadow: none;border: 1px solid $g4;
&:focus:invalid background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center; @include box-shadow(0 0 5px #d45252); border-color: #b03535
span.formHintBubble position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
&:after
@include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
.cross background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;
JAVASCRIPT：
在这里，我们可以做一些时髦的事情来使用默认消息并在您自己的“气泡”或错误消息框中继承它们。
var form = $('form');
var item = form.find(':invalid').first();
var node = item.get(0);
var pos = item.position();
var message = node.validationMessage || 'Invalid value.';
var bubble = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();
bubble.insertAfter(item);
演示：
http://jsfiddle.net/shannonhochkins/wJkVS/
尽情享受吧，我希望我可以帮助其他人进行 HTML5 表单验证，因为它很棒，而且它需要走出去！
香农
【讨论】：
【参考方案7】：form.submit() 不起作用，因为 HTML5 验证在表单提交之前执行。 当您点击提交按钮时，会触发 HTML5 验证，如果验证成功则提交表单。
【讨论】：
【参考方案8】：我认为它更简单：
$('submit').click(function(e)
if (e.isValid())
e.preventDefault();
//your code.
这将停止提交，直到表单有效为止。
【讨论】：
【参考方案9】：如其他答案中所述，使用 event.preventDefault() 来阻止表单提交。
在我写一个你可以使用的小 jQuery 函数之前检查表单（注意元素需要一个 ID！）
(function( $ )
$.fn.isValid = function()
return document.getElementById(this[0].id).checkValidity();
;
)( jQuery );
示例用法
$('#submitBtn').click( function(e)
if ($('#registerForm').isValid())
// do the request
else
e.preventDefault();
);
【讨论】：
【参考方案10】：我正在使用
objectName.addEventListener('click', function()
event.preventDefault();
但它的显示错误“event is undefined”所以在这种情况下使用像
这样的事件参数objectName.addEventListener('click', function(event)
event.preventDefault();
现在它工作正常
【讨论】：
【参考方案11】：我知道这是一个老话题，但是当有一个非常复杂（尤其是异步）的验证过程时，有一个简单的解决方法：
<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk()
var form1 = document.forms['form1']
if (!form1.checkValidity())
$("#form1_submit_hidden").click()
return
if (checkForVeryComplexValidation() === 'Ok')
form1.submit()
else
alert('form is invalid')
</script>
【讨论】：
为不同的问题发布相同的答案不是一个好主意。您发布的答案与here 完全相同。如果您认为您发布答案的两个问题相同，那么您可以针对一个问题发布此答案，并将另一个问题标记为与第一个问题重复...【参考方案12】：尝试 HTMLFormElement.reportValidity()，该函数将调用输入验证。
【讨论】：
以上是关于在不使用提交按钮的情况下触发标准 HTML5 验证（表单）？的主要内容，如果未能解决你的问题，请参考以下文章