触发标准的HTML5validation（表单），而不使用提交button？
任何人谁知道我可以在不使用提交button的情况下触发标准的HTML5validation？ （JavaScript或jQuery）。
我不想发送POST/GET请求，只做validation。
这个问题的接受答案似乎是你在找什么。
简短摘要：在提交的事件处理程序中，调用event.preventDefault() 。
经过一番研究，我想出了下面的代码，应该是你的问题的答案。 （至less它对我有效）
先使用这段代码。 $(document).ready确保代码在表单加载到DOM时执行：
$(document).ready(function() { $('#theIdOfMyForm').submit(function(event){ if(!this.checkValidity()) { event.preventDefault(); } }); });
然后调用$('#theIdOfMyForm').submit(); 在你的代码中。
UPDATE
如果你真的想显示哪个字段的用户在表单中有错误，那么在event.preventDefault();之后添加下面的代码event.preventDefault();
$('#theIdOfMyForm :input:visible[required="required"]').each(function() { if(!this.validity.valid) { $(this).focus(); // break return false; } });
它将关注第一个无效input。
您必须提交表单才能使html5validation生效。 有一种方法来获得你想要的。 Se代码：
<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>
在这里看到一个例子
注意：使用form.submit（）不适合我。 所以我创build了一个隐藏的提交button，触发在键盘上。 不要问我为什么。 也许有人可以澄清它。
简短的回答，不，在提交表单之前，没有办法“内嵌”触发html5气泡的默认function，您可以在某些input上checkValidity() ，但不能按照您的需要进行操作。 如果您仍想在validation完成后提交表单，则可以通过执行以下操作来处理此样式：
请注意，在表单上，您不希望应用validationCSS样式，只需将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，那么我强烈build议你去查看它，它更易于pipe理，易于编写，而且不太复杂。 注意：在小提琴的例子中，我确实有精确的CSS，这将编译。 我还包括一个泡沫样式的例子。
SCSS：
form:not([novalidate]) { input, textarea { &:required {background: transparent url('/../..http://img.dovov.comicons/red_asterisk.png') no-repeat 98% center;} &:required:valid {background: transparent url('/../..http://img.dovov.comicons/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('/../..http://img.dovov.comicons/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：
在这里，我们可以做一些时髦的东西来使用默认消息，并在你自己的“泡泡”或错误消息框中inheritance它们。
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);
DEMO：
http://jsfiddle.net/shannonhochkins/wJkVS/
喜欢，我希望我能帮助其他人使用HTML5表单validation，因为它很棒，而且需要走出去！
香农
你可以使用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 10以上都不行。）
form.submit（）不起作用，导致HTML5validation在表单子之前执行。 当你点击一个提交button时，HTML5validation被激怒，然后如果validation成功，表单被提交。
正如其他答案中所述，使用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(); } });
我正在使用
objectName.addEventListener('click', function() { event.preventDefault(); }
但其显示错误“ 事件未定义 ”，所以在这种情况下使用事件参数
objectName.addEventListener('click', function(event) { event.preventDefault(); }
现在它的工作正常
我知道这是一个老话题，但是当有一个非常复杂（特别是asynchronous）的validation过程时，有一个简单的解决方法：
<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>
我认为它更简单：
$('submit').click(function(e){ if (e.isValid()) e.preventDefault(); //your code. }
这将停止提交，直到表单有效。
