html5验证表单课程,表单验证HTML5(Form validation HTML5)

表单验证HTML5(Form validation HTML5)

我在表单子标签中使用'required'属性进行验证。 我遇到的问题是，当我第一次点击提交时，不会进行任何验证，也会提交一个空表单。

从病房第二次开始，每次我点击提交验证检查都会启动并报告一个空字段。

我的代码：

ID:

Name:

Submit

POST请求：

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

var sendf = {

id: $("#id").val(),

name: $("#name").val()

};

$.ajax({

type: "POST",

url: "",

data: sendf,

dataType: "text",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded'

},

success: function(response, status, xhr) {

},

}); //ajax ends

event.preventDefault();

$(this).unbind();

});//sub click ends

我做错了吗？ 单击按钮，它只是一个简单的POST请求。 任何帮助表示赞赏。 谢谢 ！

I am using the 'required' attribute in my form child tags for validation. The problem that I have is that, when I first click submit, no validation takes place and an empty form also gets submitted.

From the second time on wards, each time I click submit the validation check kicks in and reports an empty field.

My code:

ID:

Name:

Submit

POST request:

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

var sendf = {

id: $("#id").val(),

name: $("#name").val()

};

$.ajax({

type: "POST",

url: "",

data: sendf,

dataType: "text",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded'

},

success: function(response, status, xhr) {

},

}); //ajax ends

event.preventDefault();

$(this).unbind();

});//sub click ends

Am I doing anything wrong? On button click, its just a simple POST request that takes place. Any help is appreciated. Thanks !

原文：https://stackoverflow.com/questions/40052750

更新时间：2020-02-02 01:32

最满意答案

问题是你正在拦截按钮上的点击操作 - 所以html表单验证永远不会发生，POST会很愉快地处理，因为你在发送之前从不检查表单是否有效。

它第二次工作正常，因为在第一次单击后你取消了你的点击处理程序并且表单使用常规表单提交事件提交 - 导致页面重新加载，因为它不再由AJAX请求处理(在现在未绑定的点击中)处理程序)。

如果您将函数绑定到表单的提交事件，浏览器将在调用事件处理程序之前首先运行HTML表单验证。 如果删除$(this).unbind(); 您将继续通过AJAX提交表单，而不是重新加载页面。

$("form").on("submit", function(ev){

ev.preventDefault(); //prevent regular form submission via a page reload

var sendf = {

id: $("#id").val(),

name: $("#name").val()

};

$.ajax({

type: "POST",

url: "https://httpbin.org/post",

data: sendf,

dataType: "text",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded'

},

success: function(response, status, xhr) {

console.log(response);

},

}); //ajax ends

});//sub click ends

如果您确实要禁止多次提交表单，请参阅此问题 。

The problem is you are intercepting the click action on the button - so the html form validation never takes place and the POST will process happily because you never check that the form is valid before sending it.

It works fine the second time because after the first click you have unbound your click handler and the form submits using a regular form submit event - resulting in the page reloading as it is no longer being handled by the AJAX request (in the now unbound click handler).

If you instead bind your function to the form's submit event, the browser will run the HTML form validation first, before calling your event handler. If you remove the $(this).unbind(); you will continue to submit the form via AJAX and not with a page reload.

use this code (jsFiddle demo):

$("form").on("submit", function(ev){

ev.preventDefault(); //prevent regular form submission via a page reload

var sendf = {

id: $("#id").val(),

name: $("#name").val()

};

$.ajax({

type: "POST",

url: "https://httpbin.org/post",

data: sendf,

dataType: "text",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded'

},

success: function(response, status, xhr) {

console.log(response);

},

}); //ajax ends

});//sub click ends

If you do want to disable submitting the form more than once, see this question.

相关问答

唯一的问题是某些浏览器可以忽略这些属性。 如果启用，javascript将随处可用。 The only issue is that these attributes can be ignored by some browsers. And javascript will work everywhere if enabled.

这个问题的接受的答案似乎是你正在寻找的。 简要摘要：在提交的事件处理程序中，调用event.preventDefault() 。 The accepted answer to this question appears to be what you're looking for. Short summary: in the event handler for the submit, call event.preventDefault().

要检查某个字段是否有效，请使用： $('#myField')[0].checkValidity(); // returns true/false

要检查表单是否有效，请使用： $('#myForm')[0].checkValidity(); // returns true/false

如果您想显示某些浏览器的原生错误消息(例如Chrome)，不幸的是，唯一的方法是提交表单，如下所示： var $myForm = $('#myForm');

if(! $myForm[0].checkValid

...

您不能触发本机验证UI，但您可以轻松地利用任意输入元素的验证API： $('input').blur(function(event) {

event.target.checkValidity();

}).bind('invalid', function(event) {

setTimeout(function() { $(event.target).focus();}, 50);

});

一旦它失去焦点，第一个事件会在每个输入元素上触发checkValidity ，如果该元素in

...

只需添加novalidate到您的

标签：

如果您在TWIG中提交表单，可以使用以下内容。 {{ form(form, {'attr': {'novalidate': 'novalidate'}}) }}

Just add novalidate to your

tag:

If you are rendering the form in TWIG, you can use following. {{

...

将函数调用移动到

元素; 从submit输入元素中删除任何函数调用; 并将中间JavaScript代码放入

见http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate If you want to disable client side validation for a form in HTML5 add a novalidate attribute to

...

CSS技巧在这里有关于后备过程的好文章： http ： //css-tricks.com/progressively-enhancing-html5-forms/ 他们还建议了一个项目，例如http://code.google.com/p/webforms2/ 其中包括一些HTML5表单验证的好处 只记得在验证时总是检查服务器端:) CSS tricks has a nice article on the fallback process here: http://css-tricks.com/p

...

尝试在表单上设置提交事件，而不是在提交按钮上设置单击操作。 submit事件在验证后触发，因此只有在通过所有其他约束时才会发生。 这也意味着您不必在verify函数中调用form.checkValidity() 。

...

Try setting the submit event on the form instead of putting a click action on the submit button. Th

...

问题是你正在拦截按钮上的点击操作 - 所以html表单验证永远不会发生，POST会很愉快地处理，因为你在发送之前从不检查表单是否有效。 它第二次工作正常，因为在第一次单击后你取消了你的点击处理程序并且表单使用常规表单提交事件提交 - 导致页面重新加载，因为它不再由AJAX请求处理(在现在未绑定的点击中)处理程序)。 如果您将函数绑定到表单的提交事件，浏览器将在调用事件处理程序之前首先运行HTML表单验证。 如果删除$(this).unbind(); 您将继续通过AJAX提交表单，而不是重新加载页面

...