使用 jQuery 手动触发表单验证

您不能触发本机验证 UI (参见下面的编辑) ，但是您可以轻松地利用任意输入元素上的验证 API:

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

一旦失去焦点，第一个事件就会在每个输入元素上触发 checkValidity，如果元素是 invalid，那么相应的事件将被第二个事件处理程序触发并捕获。这个方法将焦点设置回元素，但是这可能非常烦人，我假设您有更好的解决方案来通知错误。下面是我上面的代码的一个工作示例.

EDIT: All modern browsers 支持 the reportValidity() method for native HTML5 validation, per 这个答案.

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


});


});

In some extent, You CAN trigger HTML5 form validation and show hints to user without submitting the form!

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

在验证按钮上设置一个 onclick侦听器，以设置一个全局标志(比如 justValidate) ，指示此单击用于检查表单的验证。

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

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

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

OK, here is the demo: Http://jsbin.com/buvuku/2/edit

解决这个问题的另一种方法是:

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

我似乎找到诀窍了: 只需删除表单 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>

当有一个非常复杂(特别是异步)的验证过程时，有一个简单的解决方案:

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

不关心旧的浏览器? 使用 form.reportValidity()。

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

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

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

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