Html 使用jQuery手动触发表单验证

我有一个包含几个不同字段集的表单。我有一些jQuery，它一次向用户显示一个字段集。对于支持HTML5验证的浏览器，我很乐意使用它。然而，我需要按我的条件去做。我正在使用JQuery

当用户单击JS链接移动到下一个字段集时，我需要在当前字段集上进行验证，并在出现问题时阻止用户向前移动

理想情况下，当用户对某个元素失去关注时，将进行验证

目前，novalidate正在使用jQuery。希望使用本机方法。：）

您不能触发本机验证UI（请参见下面的编辑），但您可以在任意输入元素上轻松利用验证API：

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

第一个事件在每个输入元素失去焦点时立即激发

checkValidity

，如果元素

无效

，则第二个事件处理程序将激发并捕获相应的事件。这一个将焦点设置回元素，但这可能非常烦人，我假设您有一个更好的解决方案来通知错误

---

编辑：所有现代浏览器本机HTML5验证的方法，根据。

将HTML5验证添加或删除到字段集有些容易

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

---

在某种程度上，您可以触发HTML5表单验证并向用户显示提示，而无需提交表单

两个按钮，一个用于验证，一个用于提交

在“验证”按钮上设置一个

onclick

侦听器，以设置一个全局标志（例如

justValidate

），表明此单击旨在检查表单的验证

并在提交按钮上设置一个

onclick

侦听器，将

justValidate

标志设置为false

然后在表单的

onsubmit

处理程序中，检查标志

justValidate

以确定返回值，并调用

preventDefault（）

以停止表单提交。如您所知，HTML5表单验证（以及对用户的GUI提示）是在

onsubmit

事件之前执行的，即使表单有效，您也可以通过返回false或调用

preventDefault（）

来停止表单提交

在HTML5中，您有一种检查表单验证的方法：

form.checkValidity（）

，这样您就可以知道表单是否在代码中验证

好的，下面是演示：

---

解决此问题的另一种方法：

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});

我似乎找到了窍门： 只需删除表单

target

属性，然后使用提交按钮验证表单并显示提示，通过JavaScript检查表单是否有效，然后发布任何内容。以下代码适用于我：

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

提交

---

$（“#提交”）。单击（函数（e）{
var isValid=true；
$（'form input'）.map（函数（）{
isValid&=this.validity['valid']；
}) ;
如果（有效）{
console.log（'valid！'）；
//张贴一些东西。。
}否则
console.log（'无效！'）；
});

当存在非常复杂（特别是异步）的验证过程时，有一个简单的解决方法：

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

...
函数提交ComplexValidationOK（）{
var form1=document.forms['form1']
如果（！form1.checkValidity（））{
$（“#表单1_提交_隐藏”）。单击（）
返回
}
如果（checkForVeryComplexValidation（）=='Ok'）{
表格1.提交（）
}否则{
警报（'表单无效'）
}
}

TL；DR:不关心旧浏览器？使用

需要旧版浏览器支持吗？继续读下去

---

实际上，可以手动触发验证

我将在回答中使用纯JavaScript来提高可重用性，不需要jQuery

---

采用以下HTML格式：

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

---

不需要对传统浏览器（如Internet Explorer）的支持吗？这是给你的。

所有现代浏览器都在

表单

元素上使用该方法

triggerButton.onclick = function () {
    form.reportValidity()
}

就这样，我们结束了。而且，使用这种方法

---

针对旧浏览器的方法

下面详细解释了如何在旧浏览器中模拟

reportValidity（）

但是，您不需要自己将这些代码块复制并粘贴到项目中，因为有一个/或多个代码块可供您使用

如果不支持

reportValidity（）

，我们需要稍微欺骗一下浏览器。那么，我们该怎么办

通过调用

form.checkValidity（）

检查表单的有效性。这将告诉我们表单是否有效，但不会显示验证UI

如果表单无效，我们将创建一个临时提交按钮并触发对它的单击。由于表单无效，我们知道它实际上不会提交，但是它会向用户显示验证提示。我们将立即删除临时提交按钮，因此用户永远看不到它

如果表单有效，我们根本不需要干预，让用户继续

---

代码：

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

这段代码几乎可以在任何普通浏览器中使用（我已经成功地测试了IE11）

Html代码：

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

....
提交

javascript（使用Jquery）：

$（文档）.on（'submit'，'validateDontSubmit'，函数（e）{
//阻止表单执行提交操作
e、 预防默认值（）；
返回false；
})
$（文档）.ready（函数（）{
//使用触发器外的按钮单击
$（'.outside'）。单击（函数（）{
$（'.validateDontSubmit按钮'）。触发器（'click'）；
});
});

希望这对您有所帮助

var字段=$（“#字段”）
字段键控（功能（ev）{
if（字段[0].value.length<10）{
字段[0]。setCustomValidity（“少于10个字符”）
}else if（字段[0].value.length==10）{
字段[0]。setCustomValidity（“字符数等于10”）
}如果（字段[0].value.length>10&&fiel
triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>