不使用提交按钮触发标准 HTML5验证(表单) ？

有人知道如何在不使用提交按钮的情况下触发表单中的标准 HTML5验证吗？(JavaScript 或 jQuery)。

我做 没有想发送 POST/GET请求，只做验证。

125012 次浏览
小开
最佳答案

这个问题的公认答案似乎正是您所寻找的。

简短摘要: 在提交的事件处理程序中，调用 event.preventDefault()。

小开

您必须提交表单才能使 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>

参见示例 给你

注意: 使用 form.mit ()对我来说不起作用。所以我创建了一个隐藏的提交按钮，可以在键盘上触发。别问我为什么。也许有人能弄清楚。

小开

Mit ()不起作用，因为在表单提交之前要执行 HTML5验证。 当您单击一个提交按钮时，将触发 HTML5验证，然后如果验证成功，将提交表单。

小开

简短的回答是，没有，没有办法在提交表单之前内联“触发”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表单验证，因为它是令人敬畏的，它需要得到那里！

莎伦

小开

经过一些研究，我想出了以下代码，应该是你的问题的答案。(至少对我有用)

先用这段代码。$(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;
}
});

它将把焦点放在第一个无效输入上。

小开

正如其他答案中所说的，使用 event.proventDefault ()来阻止表单提交。

在我编写一个小小的 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();
}

现在它工作正常

小开

我知道这是一个老话题，但是当有一个非常复杂(特别是异步)的验证过程时，有一个简单的解决方案:

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

这将停止提交，直到表格有效。

小开

您可以使用 报告有效期，但是它的浏览器支持还很差。它适用于 Chrome、 Opera 和 Firefox，但不适用于 IE、 Edge 或 Safari:

var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
if (myform.reportValidity) {
myform.reportValidity();
} else {
//warn IE users somehow
}
}

(校验有效性有更好的支持，但也不能在 IE < 10上工作。)

小开

尝试 HTMLFormElement.reportVality () ，该函数将在其中调用输入验证。

小开

这是@mhm 建议的解决方案的实现，在这里我放弃了 jQuery 的使用。

变量 formId 包含表单的 id，msg 是一个带有应用程序消息的对象。

这个实现尝试用本机 HTML5错误消息通知用户，如果不可能，则通知一个通用表单错误消息。

如果没有错误，我提交表格。

let applyForm = document.getElementById(formId);


if (!applyForm.checkValidity()) {
if (applyForm.reportValidity) {
applyForm.reportValidity();
} else {
alert(msg.ieErrorForm);
}
} else {
applyForm.submit();
}
小开

一个有趣的方式来验证表单，一节一节，而不使用提交按钮... 排序。

在活动部分的每个输入上运行 checkVality ()。如果我们发现一个失败，我们执行 submitbutton.click ()来激活浏览器的内置通知。

因为我们只在检测到错误时运行 submitbutton.click () ，所以我们不会意外地提交表单。

实际上，浏览器会在我们进入下一部分之前通知用户。

网址:

<form id="myform">
<div>
<input type="text" name="blah1" required />
<input type="text" name="blah2" required />
</div>
<div class="hidden">
<input type="text" name="blah3" required />
<input type="text" name="blah4" required />
</div>
<input type="button" id="nextbutton" name="nextbutton" value="Next" />
<input type="submit" id="submitbutton" name="send" value="Submit" />
</form>

Javascript:

var viewing = 0;
var formSection = document.getElementById("myform").getElementsByTagName("div");
var submitbutton = document.getElementById("submitbutton");
document.getElementById("nextbutton").onclick = function() {viewFormSection(viewing + 1);}


function sectionValid(section)
{
var tempInputs = formSection[section].querySelectorAll("input, select, textarea");
for(var i = 0; i < tempInputs.length; i++)
{
if(!tempInputs[i].checkValidity())
{
return false;
}
}
return true;
}


function viewFormSection(section)
{
//Validate the current section before proceeding.
if(!sectionValid(viewing))
{
submitbutton.click();
return false;
}


//Code that hides the current form section and shows the desired one.
viewing == section;
}

HTML 将在您尚未到达的部分中的隐藏字段上生成错误，因为它不喜欢这些字段不能被聚焦。但是当你读到最后一部分的时候，它就不再是一个问题了。

这在 Internet Explorer 上有效，而 reportVality ()则不然。


提交答案