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

时间:2011-08-09 20:02:48

标签: javascript jquery forms html5

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

想发送POST/GET请求,只进行验证。

12 个答案:

答案 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();
}