使用 jQuery 手动触发表单验证
Posted
技术标签:
【中文标题】使用 jQuery 手动触发表单验证【英文标题】：Manually Triggering Form Validation using jQuery 【发布时间】：2011-11-24 19:18:49 【问题描述】：我有一个包含几个不同字段集的表单。我有一些 jQuery 一次向用户显示字段集。对于支持 html5 验证的浏览器，我很乐意使用它。但是，我需要按照我的条件去做。我正在使用 JQuery。
当用户单击 JS 链接以移动到下一个字段集时，我需要在当前字段集上进行验证，并在出现问题时阻止用户继续前进。
理想情况下，当用户失去对某个元素的关注时，就会进行验证。
目前 novalidate 正在使用 jQuery。宁愿使用本机方法。 :)
【问题讨论】：
【参考方案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 reportValidity() 方法在 form 元素上。
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.
【讨论】：
这应该是 2021 年公认的答案。【参考方案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.
编辑：根据this answer，所有现代浏览器support 使用reportValidity() 方法进行本机HTML5 验证。
【讨论】：
金句“无法触发原生验证UI”。就我而言（自定义 JS 技巧 + 浏览器 html5 验证 + UI 工具提示）我别无选择，只能在最后选择隐藏的提交按钮来获得两者 如果你的表单没有提交按钮，你可以伪造一个：$('<input type="submit">').hide().appendTo($myForm).click().remove();
@philfreo form.submit() 不能正常工作吗？还是 HTML5 现在需要一个提交按钮来进行验证？
@Mattisdada 打电话给.submit() 对我不起作用。 @philfreo 的解决方案有效。嗯。
只是提醒checkValidity 只检查它，但不会弹出浏览器的标准提示。如果你也想要弹出窗口 - 使用 element.reportValidity()【参考方案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
【讨论】：
【参考方案4】：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">【讨论】：
你能补充更多解释吗？【参考方案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);
);
);
【讨论】：
【参考方案6】：我似乎找到了诀窍：
只需删除表单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>
【讨论】：
谢谢！这是 jQuery 的真正解决方案。【参考方案7】：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>
希望对您有所帮助
【讨论】：
为什么要回答这个问题？ 它使用 HTML5 验证而不提交。并为您的目的使用表单数据：form_data = $('.validateDontSubmit').serializeArray();【参考方案8】：对于输入字段
<input id="PrimaryPhNumber" type="text" name="mobile" required
pattern="^[789]\d9$" 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");
)
【讨论】：
【参考方案9】：当存在非常复杂（尤其是异步）的验证过程时，有一个简单的解决方法：
<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>
【讨论】：
【参考方案10】：解决此问题的另一种方法：
$('input').oninvalid(function (event, errorMessage)
event.target.focus();
);
【讨论】：
对我不起作用，我得到：Uncaught TypeError: $(...).oninvalid is not a function 我在 jQuery 文档中没有看到它。
我认为它应该说“无效”而不是“oninvalid”，因为您在这里使用 jQuery。以上是关于使用 jQuery 手动触发表单验证的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery 进行 MVC 手动表单验证始终返回 True