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

问题描述 投票：65回答：11

谁知道如何在不使用提交按钮的情况下触发表单中的标准HTML5验证？ （JavaScript或jQuery）。

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

javascript jquery forms html5
11个回答
21
投票

接受this question的答案似乎是你正在寻找的。

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

0
投票

我正在使用

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

但它的显示错误“事件是未定义的”所以在这种情况下使用事件参数

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

现在它的工作正常

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>
0
投票

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

30
投票

经过一些研究，我提出了以下代码，这些代码应该是您问题的答案。 （至少它对我有用）

首先使用这段代码。 $(document).ready确保在将表单加载到DOM时执行代码：

$(document).ready(function()
{
    $('#theIdOfMyForm').submit(function(event){
        if(!this.checkValidity())
        {
            event.preventDefault();
        }
    });
});

然后在你的代码中调用$('#theIdOfMyForm').submit();。

UPDATE

如果您确实想要在表单中显示用户错误的字段，请在event.preventDefault();之后添加以下代码

$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
    if(!this.validity.valid)
    {
        $(this).focus();
        // break
        return false;
    }
});

它将关注第一个无效输入。

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 <10上工作。）

11
投票

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

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表格验证，因为它很棒，而且需要走出去！

香农

1
投票

form.submit（）不起作用，因为HTML5验证是在表单子项之前执行的。当您单击提交按钮时，将对tri5进行HTML5验证，然后在验证成功时提交表单。

1
投票

我认为它更简单：

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

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

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();
        }
    });
1
投票

这是我对@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();
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.