我有一个包含几个不同字段集的表单。我有一些 jQuery 一次向用户显示字段集。对于支持 HTML5 验证的浏览器，我很乐意使用它。但是，我需要按照我的条件去做。我正在使用 JQuery。
当用户单击 JS 链接以移动到下一个字段集时，我需要在当前字段集上进行验证，并在出现问题时阻止用户继续前进。
理想情况下，当用户失去对某个元素的关注时，就会进行验证。
目前 novalidate 正在使用 jQuery。宁愿使用本机方法。 :)
【问题讨论】：
标签： html jquery validation
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 reportValidity() 方法在 form 元素上。
triggerButton.onclick = function () {
form.reportValidity()
}
就是这样，我们完成了。另外，here's a simple CodePen 使用这种方法。
适用于旧版浏览器的方法
以下是如何在旧版浏览器中模拟
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）。
【讨论】：
您无法触发本机验证 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.
编辑：根据this answer，所有现代浏览器support 使用reportValidity() 方法进行本机HTML5 验证。
【讨论】：
$('<input type="submit">').hide().appendTo($myForm).click().remove();
form.submit() 不能正常工作吗？还是 HTML5 现在需要一个提交按钮来进行验证？
.submit() 对我不起作用。 @philfreo 的解决方案有效。嗯。
checkValidity 只检查它，但不会弹出浏览器的标准提示。如果你也想要弹出窗口 - 使用 element.reportValidity()
在某种程度上，您可以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
【讨论】：
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">【讨论】：
向字段集添加或删除 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);
});
});
【讨论】：
我似乎找到了诀窍：
只需删除表单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>
【讨论】：
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();
});
【讨论】：
Uncaught TypeError: $(...).oninvalid is not a function 我在 jQuery 文档中没有看到它。