触发标准HTML5验证（窗体）而不使用提交按钮？

Question 1

有谁知道我可以在不使用提交按钮的情况下以表单形式触发标准HTML5验证吗？（JavaScript或jQuery）。

我不希望发送POST/GET的请求，只能做验证。

Question 2

该问题的可接受答案似乎是您要寻找的。

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

Question 3

经过研究，我提出了以下代码，应该可以回答您的问题。（至少对我有用）

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

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

Question 4

您可以使用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上也不起作用。）

Question 5

您必须提交表单以使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.submit（）对我不起作用。因此，我创建了一个隐藏的提交按钮，该按钮会在键入按键时触发。不要问我为什么。也许有人可以澄清一下。

Question 6

这是我对@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();
}

Question 7

简短的回答，不，您无法checkValidity()在提交表单之前“触发” HTML5气泡内联的默认功能，您可以在某些输入上使用，但同样无法如愿。如果您仍然想在验证完成后提交表单，则可以避免使用默认值，但仍然可以通过以下操作来处理此样式：

请注意，在不希望应用验证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表单验证，因为它很棒，它需要走到那里！

香农

Question 8

form.submit（）不起作用，因为在提交表单之前执行了HTML5验证。当您单击提交按钮时，将触发HTML5验证，如果验证成功，则提交表单。

Question 9

我认为它更简单：

$('submit').click(function(e){
if (e.isValid())
   e.preventDefault();
//your code.
}

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

Question 10

如其他答案所述，请使用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();
        }
    });

Question 11

我正在使用

objectName.addEventListener('click', function() {
event.preventDefault();
}

但其显示错误“事件未定义”，因此在这种情况下，请使用事件参数，例如

objectName.addEventListener('click', function(event) {
event.preventDefault();
}

现在它的作品很好

Question 12

我知道这是一个老话题，但是当有一个非常复杂的（尤其是异步）验证过程时，有一个简单的解决方法：

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

Question 13

尝试HTMLFormElement.reportValidity（），其中此函数将调用输入验证。