如何强制HTML5表单validation，而不通过jQuery提交
我在我的应用程序中有这个表单，我将通过AJAX提交，但是我想使用HTML5进行客户端validation。 所以我想能够强制的formsvalidation，也许通过jQuery。
我想在不提交表单的情况下触发validation。 可能吗？
要检查某个字段是否有效，请使用：
$('#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(); }
希望这可以帮助。 请记住，所有浏览器都不支持HTML5validation。
我发现这个解决scheme为我工作。 只需调用一个javascript函数wlike this：action =“javascript：myFunction（）;” 然后你有html5validation…真的很简单:-)
这是一个更一般的方式，是一个更清洁：
像这样创build你的表单（可以是一个什么也不做的虚拟表单）：
<form class="validateDontSubmit"> ...
绑定您不想提交的所有表单：
$(document).on('submit','.validateDontSubmit',function (e) { //prevent the form from doing a submit e.preventDefault(); return false; })
现在让我们说你有一个<a> （在<form> ），点击你想要validation的forms：
$('#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' });
这里有一些笔记：
- 我注意到，你不必真的提交表单来进行validation – 对
checkValidity()的调用就足够了（至less在chrome中）。 如果其他人可以添加评论与testing这个理论在其他浏览器，我会更新这个答案。 - 触发validation的事情不必在
<form>。 这只是一个干净而灵活的方式，有一个通用的解决scheme..
你讲了两个不同的东西“HTML5validation”和使用JavaScript / jQuery的HTML表单validation。
HTML5“具有”用于validation表单的内置选项。 比如在一个字段上使用“必需”属性，这可能（基于浏览器实现）无法使用javascript / jquery进行表单提交。
用javascrip / jquery你可以做这样的事情
$('your_form_id').bind('submit', function() { // validate your form here return (valid) ? true : false; });
可能会晚到晚会，但不知何故，我发现这个问题，而试图解决类似的问题。 由于没有代码从这个网页为我工作，同时我想出了解决scheme，按照指定的工作。
问题是当你的<form> DOM包含单个<button>元素，一旦被触发， <button>会自动变成表单。 如果您使用AJAX，您可能需要防止默认操作。 但有一个问题：如果你这样做，你也将阻止基本的HTML5validation。 因此，只有在表单有效的情况下，才能防止该button上的默认值。 否则，HTML5validation将保护您免于提交。 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 } }); });
上述代码将允许您使用基本的HTML5validation（包含types和模式匹配）而不提交表单。
if $("form")[0].checkValidity() $.ajax( url: "url" type: "post" data: { } dataType: "json" success: (data) -> ) else #important $("form")[0].reportValidity()
来自： html5表单validation
要检查所有必填字段而不使用提交button，您可以使用下面的function。
您必须将必需的属性分配给控件。
$("#btnSave").click(function () { $(":input[required]").each(function () { var myForm = $('#form1'); if (!$myForm[0].checkValidity()) { $(myForm).submit(); } }); });
我有一个相当复杂的情况，我需要多个提交button来处理不同的事情。 例如，保存和删除。
基础是它也不显眼，所以我不能把它作为一个正常的button。 但也想利用html5validation。
以及提交事件被覆盖，以防用户按下input以触发预期的默认提交; 在这个例子中保存。
这里是处理表单的工作仍然可以使用/不使用javascript和HTML5validation，同时提交和点击事件。
jsFiddle Demo – 提交并单击覆盖HTML5validation
的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，它将永远不会传播到浏览器的提交事件。
需要指出的是，在用户按下回车键时，有些浏览器不会触发表单提交，而会触发表单中的第一个提交button。 因此有一个console.log（'表单提交'）来表明它不会触发。
你可以在不提交表单的情况下完成。
例如，如果提交表单的id为“search”的button是另一种forms。 您可以在该提交button上调用click事件，然后调用ev.preventDefault。 对于我的情况，我从Form A提交中validation表格B. 喜欢这个
function validateFormB(ev){ // DOM Event object //search is in Form A $("#search").click(); ev.preventDefault(); //Form B validation from here on }
$(document).on("submit", false); submitButton.click(function(e) { if (form.checkValidity()) { form.submit(); } });
你不需要jQuery来实现这一点。 在你的表格中添加：
onsubmit="return buttonSubmit(this)
或在JavaScript中：
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
在你的buttonSubmit函数（或者你所说的）中，你可以使用AJAX提交表单。 如果您的表单在HTML5中validation， buttonSubmit将只会被调用。
如果这有助于任何人，这里是我的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; }
我的一些表单包含多个提交button，因此这行if (submitvalue == e.elements[i].value) 。 我使用click事件来设置submitvalue的值。
var $myForm = $('#myForm '); if (!$myForm[0].checkValidity()) { $('<input type="submit">').hide().appendTo($myForm).click().remove(); }
我知道这已经被回答，但我有另一个可能的解决scheme。
如果使用jQuery，你可以这样做。
首先在jQuery上创build几个扩展，以便根据需要重用这些扩展。
$.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>
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
不是最好的答案，但为我工作。
这工作forms我显示与表单validation原生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 。
参考
希望有助于某人。
这是HTML5执行任何forms的validation的非常简单的方法，同时仍然具有对表单的现代JS控制。 唯一需要注意的是submitbutton必须位于<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="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" 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... }
