2011-12-28 102 views
0

我正在使用HTML5验证和jQuery的ajax和其他功能。我有一个表格,我已经添加验证输入类型,即<input id="country" type="search" value="" required />jQuery事件和HTML5验证

现在的问题是,形式永远不会发布,直到我已经填写有效值,然后我需要做一个Ajax调用,而不是传统的形式发布。如果我添加一个事件这样

<form id="objectForm" method="POST" action="#!/" onsubmit="return submitData();">它的工作原理 但像他这样

$('.signinButton').unbind('click').click(function() { 
    submitData(); 
}); 

浏览器验证不起作用。

有什么建议可以在这里完成。

感谢, WA

+1

事件处理程序的形式绑定submit事件不提交按钮 – 2011-12-28 08:26:31

+0

确实控制到达内'$(“ signinButton”)的点击。 ('click')。click(function(){}'? – 2011-12-28 08:27:22

+0

它用于$('#objectForm')。submit(function(){}); Thanks Phil – 2011-12-28 08:31:32

回答

1

正如评论所指出的,你要绑定到表单提交,而不是实际的按钮点击(如果他们打回车键会发生什么,浏览器会自动提交表单?)。通常,每页只能有一个表格标签,因此您通常应该使用通用的$("form")选择器以确保安全。但是,如果您确实有多个表单(或者只是想要格外小心),则可以通过表单的id选择器来获取它。

你指出你想要捕获事件,而是使用Ajax调用(而不是允许回发),这种情况下,类似下面的例子可以很好地工作,关键是你必须停止表单元素的默认,以防止它做回发。

$(function() { 
    $("#objectForm").submit(function (e) { 
    if (validationPasses) { 
     callAjaxFunction(); 
    } 
    e.preventDefault(); 
    e.stopPropagation(); // this one isn't always necessary, but if you really want to make sure (like if you, for some reason, have nested form elements) that the event is stopped in its tracks, calling both helps. 
    }); 
});