如何强制html5表单验证而不通过jQuery提交它

要检查某个字段是否有效，请使用:

$('#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验证。

你说的是两种不同的东西“HTML5验证”和使用javascript/jquery的HTML表单验证。

HTML5“拥有”用于验证表单的内置选项。例如在字段上使用“required”属性，如果不使用javascript/jquery，表单提交可能会失败(基于浏览器实现)。

使用javascript /jquery，你可以做这样的事情

$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});

action="javascript:myFunction();"

然后是html5验证……真的很简单:-)

这里有一种更简单的方法:

像这样创建你的表单(可以是一个什么都不做的虚拟表单):

<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中)。如果其他人可以在其他浏览器上添加测试这个理论的评论，我会更新这个答案。
• 触发验证的东西不一定在<form>中。这只是一种干净而灵活的通用解决方案。

在不使用提交按钮的情况下检查所有必须填写的字段，您可以使用下面的功能。

你必须为控件分配要求属性。

  $("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});

我有一个相当复杂的情况，我需要多个提交按钮来处理不同的事情。例如“保存”和“删除”。

其基础是它也不显眼，所以我不能只是让它成为一个普通的按钮。但也想利用html5验证。

此外，如果用户按下enter键触发预期的默认提交，提交事件将被覆盖;在本例中保存。

这里是处理表单的努力，使用/不使用javascript和html5验证，同时使用提交和单击事件。

jsFiddle演示- HTML5验证与提交和点击覆盖

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

需要指出的是，在某些浏览器中，当用户按下回车键时，不会触发表单提交，而是触发表单中的第一个提交按钮。因此有一个console.log('form submit')来显示它没有触发。

你可以在不提交表单的情况下完成。

function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

不是最好的答案，但对我来说是可行的。

    if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {


}
dataType: "json"
success: (data) ->


)
else
#important
$("form")[0].reportValidity()

来自:Html5表单验证

我知道这个问题已经有了答案，但我还有另一个可能的解决方案。

如果使用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>

$(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提交表单。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的值。

也许是迟到了，但不知何故，我在试图解决类似的问题时发现了这个问题。由于该页没有代码为我工作，同时我提出了解决方案，工作如指定。

问题是当你的<form> DOM包含单个<button>元素时，一旦触发，<button>将自动形成sumbit。如果您使用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验证(类型和模式匹配)，而无需提交表单。

这从我工作到显示带有表单验证的原生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。

参考< a href = " https://stackoverflow.com/a/26524497/2218697 " > < / >

希望能帮助别人。

这是让HTML5对任何表单执行验证的一种非常直接的方式，同时仍然拥有对表单的现代JS控制。唯一需要注意的是提交按钮必须在<form>中。

超文本标记语言

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

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}

这种方法对我来说很有效:

1. 在你的form中添加onSubmit属性，不要忘记在值中包含return。

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">
   

2. Define the function.

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

我认为这是最好的方法

将使用jQuery验证插件，它使用最佳实践的表单验证，它也有良好的浏览器支持。因此，您不必担心浏览器兼容性问题。

我们可以使用jQuery验证有效的()函数来检查所选表单是否有效，或者是否所有所选元素都有效，而不提交表单。

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

下面的代码为我工作，

$("#btn").click(function () {


if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()


});

根据这个问题，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);}
});
}
}

2022香草JS解决方案

纯JavaScript提供了所需的所有函数。我知道这个问题是关于jQuery的，但即使是jQuery的答案也使用这些函数，它们是checkValidity()和reportValidity()。

测试整个表单

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

显然，这必须在由事件侦听器调用的函数中才有意义。