触发HTML5表单验证

我有一个带有几个不同字段集的表单。我有一些Javascript可以一次向用户显示字段集。对于支持HTML5验证的浏览器，我很乐意使用它。但是，我需要按我的意愿去做。我正在使用JQuery。

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

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

目前没有使用Java进行验证。宁愿使用本机方法。:)

您无法触发本机验证UI，但可以轻松地在任意输入元素上利用验证API：

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

checkValidity一旦失去焦点，第一个事件就会在每个输入元素上触发，如果输入元素是第一个事件，则invalid相应的事件将被第二个事件处理程序触发并捕获。这将焦点重新设置到元素上，但这可能很烦人，我认为您有一个更好的通知错误的解决方案。 这是上面我的代码的一个有效示例。

TL; DR：不关心旧的浏览器？使用form.reportValidity()。

需要旧版浏览器支持？继续阅读。

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

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

假定以下HTML形式：

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

让我们在JavaScript中获取UI元素：

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

不需要对Internet Explorer等旧版浏览器的支持吗？这个给你。

所有现代浏览器都支持元素reportValidity()上的方法form。

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

就是这样，我们完成了。另外，这是使用此方法的简单CodePen。

适用于较旧浏览器的方法

以下是如何reportValidity()在较旧的浏览器中进行模拟的详细说明。

不过，你不需要复制和那些代码块粘贴到你的项目你自己-还有ponyfill / 填充工具一应俱全你。

凡reportValidity()不支持，我们需要欺骗浏览器一点点。那么，我们该怎么办？

1. 致电来检查表格的有效性form.checkValidity()。这将告诉我们表单是否有效，但不会显示验证UI。
2. 如果表单无效，我们将创建一个临时的提交按钮并触发一个单击。由于该表单无效，因此我们知道它实际上不会提交，但是它将向用户显示验证提示。我们将立即删除临时提交按钮，因此用户将永远看不到它。
3. 如果表格有效，我们完全不需要干预，让用户继续进行。

在代码中：

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

这是一个有效的CodePen示例。

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

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

onclick在验证按钮上设置一个侦听器，以设置一个全局标志（例如justValidate），以指示此单击旨在检查表单的有效性。

并onclick在“提交”按钮上设置一个侦听器，以将justValidate标志设置为false。

然后onsubmit，在表单的处理程序中，检查标志justValidate以确定返回值，然后调用preventDefault()停止表单提交。如您所知，HTML5表单验证（以及向用户的GUI提示）是在onsubmit事件之前执行的，即使表单为VALID，您也可以通过返回false或invoke来停止表单提交preventDefault()。

并且，在HTML5中，您可以使用一种方法来检查表单的有效性：中的form.checkValidity()，然后您就可以知道代码中表单是否经过了验证。

好的，这是演示：http : //jsbin.com/buvuku/2/edit

我不确定是否应该从头开始输入所有内容，因为发表在A List Apart上的这篇文章在解释它方面做得很好。MDN还提供了有关HTML5表单和验证的便捷指南（包括API和相关CSS）。

使字段集添加或删除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);

    });

});

我似乎找到了窍门：只需删除form target属性，然后使用Submit按钮来验证表单并显示提示，通过JavaScript检查表单是否有效，然后发布任何内容。以下代码对我有用：

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

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

HTML代码：

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

javascript（使用Jquery）：

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

希望这个能对您有所帮助

对于输入字段

<input id="PrimaryPhNumber" type="text" name="mobile"  required
                                       pattern="^[789]\d{9}$" minlenght="10" maxLength="10" placeholder="Eg: 9444400000"
                                       class="inputBoxCss"/>

$('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Please enter a valid phone number');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

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

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

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

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