任何知道如何在不使用提交按钮的情况下触发表单中的标准HTML5验证的人? (JavaScript或jQuery)。
我不想发送POST/GET
请求,只进行验证。
答案 0 :(得分:29)
经过一些研究,我提出了以下代码,这些代码应该是您问题的答案。 (至少它对我有用)
首先使用这段代码。 $(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;
}
});
它会关注第一个无效输入。
答案 1 :(得分:21)
this question的已接受答案似乎是您正在寻找的答案。
简短摘要:在提交的事件处理程序中,调用event.preventDefault()
。
答案 2 :(得分:15)
您可以使用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&lt; 10上都不起作用。)
答案 3 :(得分:10)
您必须提交表单才能使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()对我不起作用。所以我创建了一个隐藏的提交按钮,在按键上触发。不要问我为什么。也许有人可以澄清一下。
答案 4 :(得分:2)
简短回答,不,在提交表单之前无法“触发”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);
DEMO:
http://jsfiddle.net/shannonhochkins/wJkVS/
享受,我希望我能帮助其他人进行HTML5表单验证,因为它很棒,而且它需要走出去!
香农
答案 5 :(得分:1)
form.submit()不起作用,因为HTML5验证是在表单子目录之前执行的。 单击提交按钮时,将对tri5进行HTML5验证,然后在验证成功时提交表单。
答案 6 :(得分:1)
如其他答案中所述,使用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();
}
});
答案 7 :(得分:0)
我正在使用
objectName.addEventListener('click', function() {
event.preventDefault();
}
但显示错误&#34; 事件未定义&#34;所以在这种情况下使用事件参数,如
objectName.addEventListener('click', function(event) {
event.preventDefault();
}
现在它的工作正常
答案 8 :(得分:0)
我知道这是一个老话题,但是当有一个非常复杂(特别是异步)的验证过程时,有一个简单的解决方法:
<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>
答案 9 :(得分:0)
我认为它更简单:
$('submit').click(function(e){
if (e.isValid())
e.preventDefault();
//your code.
}
这将停止提交,直到表格有效。
答案 10 :(得分:0)
尝试HTMLFormElement.reportValidity(),该函数将在其中调用输入验证。
答案 11 :(得分:0)
这是我对@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();
}