Question

我有一个包含多个不同字段集的表单。我有一些Javascript，一次一个地向用户显示字段集。对于支持HTML5验证的浏览器，我很乐意使用它。但是，我需要按照我的条件这样做。我正在使用JQuery。

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

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

目前无效并使用Javascript。宁愿使用本机方法。：）

Answer 1

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等传统浏览器吗？这是给你的。

所有现代浏览器support form元素上相对较新的reportValidity()方法。

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

是的，我们已经完成了。此外，here's a simple CodePen使用此方法。

针对旧浏览器的方法

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

但是，您不需要自己将这些代码块复制并粘贴到项目中 - 您可以随时使用ponyfill / polyfill。

如果不支持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）。

Here's a working CodePen example.

Answer 2

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

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

第一个事件在失去焦点时会在每个输入元素上触发checkValidity，如果元素为invalid，则相应的事件将被第二个事件处理程序触发并捕获。这个将焦点放回元素，但这可能非常烦人，我假设你有一个更好的解决方案来通知错误。 Here's a working example of my code above

Answer 3

在某种程度上，您可以trigger HTML5表单验证并在不提交表单的情况下向用户显示提示！

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

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

在提交按钮上设置onclick侦听器，将justValidate标志设置为false。

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

而且，在HTML5中，您有一种方法可以检查表单的验证：form.checkValidity()，然后您可以在代码中知道表单是否有效。

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

Answer 4

我不确定从头开始输入所有内容是值得的，因为this article published in A List Apart做了很好的解释。 MDN还有一个handy guide用于HTML5表单和验证（涵盖API以及相关的CSS）。

Answer 5

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

    });

});

Answer 6

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>

希望这对您有帮助

Answer 7

我似乎找到了诀窍：只需删除表单target属性，然后使用提交按钮验证表单并显示提示，检查表单是否通过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>

Answer 8

var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("characters less than 10")
        
    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("characters equal to 10")
        
    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("characters greater than 10 and less than 20")
        
    }else if(field[0].validity.typeMismatch) {
    	field[0].setCustomValidity("wrong email message")
        
    }else {
    	field[0].setCustomValidity("") // no more errors
        
    }
    field[0].reportValidity()
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" id="field">

Answer 9

对于输入字段

<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");
        }
    })

Answer 10

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

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

Answer 11

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

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

触发HTML5表单验证

11 个答案: