如何在不通过 jQuery 提交的情况下强制进行 html5 表单验证
Posted
技术标签:
【中文标题】如何在不通过 jQuery 提交的情况下强制进行 html5 表单验证【英文标题】：How to force a html5 form validation without submitting it via jQuery 【发布时间】：2016-04-08 09:56:33 【问题描述】：我的应用中有这个表单，我将通过 AJAX 提交它，但我想使用 html5 进行客户端验证。所以我希望能够强制表单验证，也许是通过 jQuery。
我想在不提交表单的情况下触发验证。有可能吗？
【问题讨论】：
您能指定在什么时候验证表单吗？什么触发了验证？您想在用户输入、进入/离开字段、更改值时验证每个字段吗？ 我希望能够做这样的事情：$("#my_form").triggerHtml5Validation() 这个页面可能对link有帮助 你可以在没有 jQuery 的情况下实现这一点。查看我的解决方案。 【参考方案1】：要检查某个字段是否有效，请使用：
$('#myField')[0].checkValidity(); // returns true|false
要检查表单是否有效，请使用：
$('#myForm')[0].checkValidity(); // returns true|false
如果您想显示某些浏览器（例如 Chrome）的原生错误消息，不幸的是，唯一的方法是提交表单，如下所示：
var $myForm = $('#myForm');
if (!$myForm[0].checkValidity())
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find(':submit').click();
请记住，目前并非所有浏览器都支持 HTML5 验证。
【讨论】：
尝试用$myForm.find(':submit').click()替换$myForm.submit()
亚伯拉罕是正确的。您必须实际单击提交按钮（以编程方式）。调用 $myForm.submit() 不会触发验证。
如果你的表单没有提交按钮，你可以伪造一个：$('<input type="submit">').hide().appendTo($myForm).click().remove();
这个答案非常有用，因为关于checkValidity()的提示，但它也有一个危险的错误。 checkValidity() 是触发本机浏览器错误消息的原因，而不是单击提交按钮。如果你有一个监听提交按钮点击的事件监听器，你会在你执行 `$myForm.find(':submit').click()` 时触发它，这将触发自身并导致无限递归。
使用 .reportValidity();在不提交表单的情况下显示本机浏览器错误消息【参考方案2】：
下面的代码对我有用，
$("#btn").click(function ()
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
);
【讨论】：
reportValidity() 是高亮必填字段的最佳功能。
是的，这确实像一个魅力，但前提是浏览器支持它。 caniuse.com/#search=reportValidity
为什么不只是 .reportValidity()？它也会检查有效性并返回真/假。
感谢reportValidity()救了我的命【参考方案3】：
我发现这个解决方案对我有用。 只需像这样调用一个javascript函数：
action="javascript:myFunction();"
然后你就有了 html5 验证......真的很简单 :-)
【讨论】：
这对我也有用，我认为这是最好的答案。我在<form> 上设置了action="javascript:0"，并将<button> 上的click 事件绑定到MyFunction()，一切都很好。我将所有 JS 排除在 HTML 之外。然后MyFunction 可以测试form.checkValidity() 以继续。
示例代码总是有用的。
绑定到表单的onsubmit() 几乎总是比绑定到按钮的onclick() 好，因为还有其他提交表单的方法。 （特别是通过点击return 键。）
+1 这太棒了。如果字段为空或者是电子邮件，则不再进行 javascript 方法验证。浏览器可以为我们做到！这个跨浏览器兼容吗？
action="javascript:myFunction();" 或 action="javascript:0" 在最新的 Firefox (67) 中不再有效。不过可以在 Chrome 上运行。【参考方案4】：
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data:
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
来自：html5 form validation
【讨论】：
reportValidity 是 Chrome 40.0 中的 only supported
从 49 版开始，Firefox 现在支持reportValidity
我喜欢这部分$("form")[0].reportValidity()。我需要它以防有效性检查失败。
太棒了！谢谢！【参考方案5】：
这是一种更通用的方式，更简洁：
像这样创建你的表单（可以是一个什么都不做的虚拟表单）：
<form class="validateDontSubmit">
...
绑定所有你不想提交的表单：
$(document).on('submit','.validateDontSubmit',function (e)
//prevent the form from doing a submit
e.preventDefault();
return false;
)
现在假设您有一个<a>（在<form> 内），点击时您想要验证表单：
$('#myLink').click(function(e)
//Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
//has .validateDontSubmit class
var $theForm = $(this).closest('form');
//Some browsers don't implement checkValidity
if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity())
return;
//if you've gotten here - play on playa'
);
这里有几点说明：
我注意到您不必实际提交表单以进行验证 - 调用checkValidity() 就足够了（至少在 chrome 中）。如果其他人可以添加 cmets 在其他浏览器上测试这个理论，我会更新这个答案。
触发验证的东西不必在<form> 内。这只是获得通用解决方案的一种干净而灵活的方法。..
【讨论】：
【参考方案6】：聚会可能迟到了，但不知何故，我在尝试解决类似问题时发现了这个问题。由于此页面中没有代码对我有用，同时我想出了按指定工作的解决方案。
问题是当您的<form> DOM 包含单个<button> 元素时，一旦触发，<button> 将自动合并表单。如果您使用 AJAX，您可能需要防止默认操作。但是有一个问题：如果你这样做，你也会阻止基本的 HTML5 验证。因此，仅当表单有效时才阻止该按钮上的默认值是一个很好的调用。否则，HTML5 验证将保护您无法提交。 jQuery checkValidity() 将对此有所帮助：
jQuery:
$(document).ready(function()
$('#buttonID').on('click', function(event)
var isvalidate = $("#formID")[0].checkValidity();
if (isvalidate)
event.preventDefault();
// HERE YOU CAN PUT YOUR AJAX CALL
);
);
上述代码将允许您在不提交表单的情况下使用基本的 HTML5 验证（类型和模式匹配）。
【讨论】：
【参考方案7】：您谈到两个不同的东西“HTML5 验证”和使用 javascript/jquery 验证 HTML 表单。
HTML5“具有”用于验证表单的内置选项。例如在字段上使用“必需”属性，这可能（基于浏览器实现）在不使用 javascript/jquery 的情况下提交表单失败。
使用 javascrip/jquery 你可以做这样的事情
$('your_form_id').bind('submit', function()
// validate your form here
return (valid) ? true : false;
);
【讨论】：
我想在不提交表单的情况下触发验证。 根据您的更新 - 我仍然认为这是正确的解决方案。您没有指定要如何触发triggerHtml5Validation() 函数。上面的代码会将提交事件附加到您的表单中；在提交时，您拦截事件并验证表单。如果您从不想提交表单，只需 return false; 提交将永远不会发生。
return (valid) ? true : false === return valid。 :)
糟糕，我 +1 了@davi，因为我一开始也在想同样的事情。但实际上并不相同，因为 return valid 不会为 null/undefined 值返回 false。不过没关系，反正答案是伪代码，重点是：用return false不提交表单^^【参考方案8】：
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity())
$('<input type="submit">').hide().appendTo($myForm).click().remove();
【讨论】：
它在 chrome 74 上不起作用。我可以在它上面投光吗？【参考方案9】：要在不使用提交按钮的情况下检查表单的所有必填字段，您可以使用以下功能。
您必须将 required 属性分配给控件。
$("#btnSave").click(function ()
$(":input[required]").each(function ()
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
$(myForm).submit();
);
);
【讨论】：
【参考方案10】：您不需要 jQuery 来实现这一点。在您的表单中添加：
onsubmit="return buttonSubmit(this)
或在 JavaScript 中：
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
在您的buttonSubmit 函数（或您所称的任何函数）中，您可以使用 AJAX 提交表单。 buttonSubmit 只有在您的表单在 HTML5 中经过验证时才会被调用。
如果这对任何人都有帮助，这是我的buttonSubmit 函数：
function buttonSubmit(e)
var ajax;
var formData = new FormData();
for (i = 0; i < e.elements.length; i++)
if (e.elements[i].type == "submit")
if (submitvalue == e.elements[i].value)
submit = e.elements[i];
submit.disabled = true;
else if (e.elements[i].type == "radio")
if (e.elements[i].checked)
formData.append(e.elements[i].name, e.elements[i].value);
else
formData.append(e.elements[i].name, e.elements[i].value);
formData.append("javascript", "javascript");
var action = e.action;
status = action.split('/').reverse()[0] + "-status";
ajax = new XMLHttpRequest();
ajax.addEventListener("load", manageLoad, false);
ajax.addEventListener("error", manageError, false);
ajax.open("POST", action);
ajax.send(formData);
return false;
我的一些表单包含多个提交按钮，因此这一行 if (submitvalue == e.elements[i].value)。我使用点击事件设置了submitvalue 的值。
【讨论】：
【参考方案11】：这种方式对我很有效：
在form 中添加onSubmit 属性，不要忘记在值中包含return。
<form id='frm-contact' method='POST' action='' onSubmit="return contact()">
定义函数。
function contact(params)
$.ajax(
url: 'sendmail.php',
type: "POST",
dataType: "json",
timeout: 5000,
data: params:params ,
success: function (data, textStatus, jqXHR)
// callback
,
error: function(jqXHR, textStatus, errorThrown)
console.log(jqXHR.responseText);
);
return false;
【讨论】：
【参考方案12】：我遇到了一个相当复杂的情况，我需要多个提交按钮来处理不同的事情。例如，保存和删除。
基础是它也不显眼，所以我不能把它做成一个普通的按钮。但也想利用html5验证。
如果用户按下回车键触发预期的默认提交，提交事件也会被覆盖；在这个例子中保存。
这里是处理表单的努力，无论是否使用 javascript 和 html5 验证，提交和点击事件。
jsFiddle Demo - HTML5 validation with submit and click overrides
xHTML
<form>
<input type="text" required="required" value="" placeholder="test" />
<button type="submit" name="save">Save</button>
<button type="submit" name="delete">Delete</button>
</form>
JavaScript
//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($)
var isValid = null;
var form = $('form');
var submitButton = form.find('button[type="submit"]')
var saveButton = submitButton.filter('[name="save"]');
var deleteButton = submitButton.filter('[name="delete"]');
//submit form behavior
var submitForm = function(e)
console.log('form submit');
//prevent form from submitting valid or invalid
e.preventDefault();
//user clicked and the form was not valid
if(isValid === false)
isValid = null;
return false;
//user pressed enter, process as if they clicked save instead
saveButton.trigger('click');
;
//override submit button behavior
var submitClick = function(e)
//Test form validitiy (HTML5) and store it in a global variable so both functions can use it
isValid = form[0].checkValidity();
if(false === isValid)
//allow the browser's default submit event behavior
return true;
//prevent default behavior
e.preventDefault();
//additional processing - $.ajax() etc
//.........
alert('Success');
;
//override submit form event
form.submit(submitForm);
//override submit button click event
submitButton.click(submitClick);
)(jQuery);
使用 Javascript 的注意事项是浏览器的默认 onclick 必须传播到提交事件必须发生，以便在不支持代码中的每个浏览器的情况下显示错误消息。 否则，如果 click 事件被 event.preventDefault() 覆盖或返回 false，它将永远不会传播到浏览器的提交事件。
需要指出的是，在某些浏览器中，当用户按下回车键时不会触发表单提交，而是会触发表单中的第一个提交按钮。因此有一个 console.log('form submit') 表明它没有触发。
【讨论】：
我们很清楚这可以在没有 jQuery 的情况下完成，但是 OP 撰写了这个主题的标题：“如何强制 html5 表单验证而不通过 jQuery 提交”，明确建议必须使用 jQuery . @vzr 我的回答明确使用了jQuery。它的不同之处在于它使用多个提交按钮处理 HTML5 验证，并在无效时阻止 AJAX 表单提交。当用户按下键盘上的enter 键时，默认为save 操作。在我发布时，所提供的答案都不是多个提交按钮或捕获输入键以防止 ajax 提交的解决方案。【参考方案13】：
您无需提交表单即可。
例如，如果 id 为“search”的表单提交按钮在另一个表单中。您可以在该提交按钮上调用 click 事件，然后调用 ev.preventDefault 。 对于我的情况，我从表单 A 提交中验证表单 B。 像这样
function validateFormB(ev) // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
【讨论】：
【参考方案14】：2022 原版 JS 解决方案
Pure JavaScript 拥有你需要的所有功能。我知道这个问题是关于 jQuery 的，但我确信我不是唯一一个在这里搜索 vanilla JS 解决方案的人，所以这就是我发现的。
测试整个表单
let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event)
// Only needed if event is submit, otherwise this line can be skipped
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false)
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
// Code if all fields are valid; continue form submit or make Ajax call.
)
测试特定字段
checkValidity()和reportValidity()不仅可以用在表单上，还可以用在特定的字段上。如果不需要，无需创建表单或虚拟提交按钮。
// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false)
// If not, show the errors to the user
inputElement.reportValidity();
return;
// Nothing? Great, continue to the Ajax call or whatever
显然，这必须在事件侦听器调用的函数中才有意义。
【讨论】：
如果你有 jQuery$("#myform") 然后你去$("#myform")[0].checkValidity()【参考方案15】：
$("#form").submit(function() $("#saveButton").attr("disabled", true); );
不是最佳答案，但对我有用。
【讨论】：
【参考方案16】：我知道这个问题已经得到解答，但我有另一个可能的解决方案。
如果使用 jquery，你可以这样做。
首先在 jquery 上创建几个扩展，以便您可以根据需要重新使用它们。
$.extend(
bypassDefaultSubmit: function (formName, newSubmitMethod)
$('#'+formName).submit(function (event)
newSubmitMethod();
event.preventDefault();
);
接下来在你想使用它的地方做这样的事情。
<script type="text/javascript">
/*if you want to validate the form on a submit call,
and you never want the form to be submitted via
a normal submit operation, or maybe you want handle it.
*/
$(function ()
$.bypassDefaultSubmit('form1', submit);
);
function submit()
//do something, or nothing if you just want the validation
</script>
【讨论】：
【参考方案17】：$(document).on("submit", false);
submitButton.click(function(e)
if (form.checkValidity())
form.submit();
);
【讨论】：
$(document).on("submit", false); //这个工作得很好，这就是我正在寻找的:)【参考方案18】：这让我显示带有表单验证的原生 HTML 5 错误消息。
<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>
$('#RegForm').on('submit', function ()
if (this.checkValidity() == false)
// if form is not valid show native error messages
return false;
else
// if form is valid , show please wait message and disable the button
$("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");
$(this).find(':submit').attr('disabled', 'disabled');
);
注意： RegForm 是form id。
Reference
希望能帮助别人。
【讨论】：
您必须添加事件以启用禁用的提交按钮【参考方案19】：这是一种让 HTML5 对任何表单执行验证的非常直接的方法，同时仍然让现代 JS 控制表单。唯一需要注意的是提交按钮必须在<form> 内。
html
<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d3\)|\d3)[- ]?\d3[- ]?\d4" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>
js
// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );
function newAcctSubmit()
var myForm = jQuery( "#newUserForm" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
// post form with jQuery or whatever you want to do with a valid form!
var formVars = myForm.serialize();
etc...
【讨论】：
【参考方案20】：我认为最好的方法
将使用jQuery Validation 插件，该插件使用最佳实践进行表单验证，并且还具有良好的浏览器支持。因此您无需担心浏览器兼容性问题。
我们可以使用 jQuery 验证 valid() 函数来检查选定的表单是否有效，或者是否所有选定的元素都有效，而无需提交表单。
<form id="myform">
<input type="text" name="name" required>
<br>
<button type="button">Validate!</button>
</form>
<script>
var form = $( "#myform" );
form.validate();
$( "button" ).click(function()
console.log( "Valid: " + form.valid() );
);
</script>
【讨论】：
【参考方案21】：根据问题html5有效性应该首先使用jQuery进行验证，并且在大多数答案中这没有发生，原因如下：
使用 html5 表单的默认功能进行验证时
checkValidity();// returns true/false
我们需要了解jQuery返回对象数组，而像这样选择
$("#myForm")
因此，您需要指定第一个索引以使 checkValidity() 函数起作用
$('#myForm')[0].checkValidity()
这里是完整的解决方案：
<button type="button" name="button" onclick="saveData()">Save</button>
function saveData()
if($('#myForm')[0].checkValidity())
$.ajax(
type: "POST",
url: "save.php",
data: data,
success: function(resp)console.log("Response: "+resp);
);
【讨论】：
以上是关于如何在不通过 jQuery 提交的情况下强制进行 html5 表单验证的主要内容，如果未能解决你的问题，请参考以下文章
如何在不提交的情况下使用 jQuery Validator 验证表单的第一部分？
使用 jQuery-AJAX 向 PHP 提交表单并在不刷新的情况下在 div 中显示新内容的问题