我有一个名为generate_form
的函数,该函数使用jQuery创建表单并将其插入页面。其他几个函数调用此通用函数来创建其表单,然后依次返回该表单。
为了进行验证,我希望调用者能够提供自己的验证功能,因为特定的用例具有非标准的约束(例如必须发出ajax调用来检查/验证事物)。我遇到的问题是,我不确定如何将自定义验证功能添加到表单的Submit事件中。
非常简化和截断的代码:
function user_test() {
$('#formcontainer').append(generate_form(
{
name:'test',
id:'user_test_form',
fields:
[
{name:'username',type:'text',id:'username'}
],
validation:function() { return $('#username').length > 0; }
})
);
}
function generate_form(data) {
var form=$('<form>',{id:data['id']});
//SNIP: add fields to form
$(form).submit(function(event) {
event.preventDefault();
//does not work, because data is undefined in this scope
if ( !data['validation']() ) {
//SNIP: validation failed notice
return false;
}
//SNIP: post form
});
return form;
}
最佳答案
几种解决方法。一种是将提交回调绑定到data
的上下文,因此:
$(form).on('submit', function(event) {
event.preventDefault();
if (this.validation && !this.validation()) return false;
}.bind(data));
另一个方法是将
data
作为事件数据传递。这是通过.on()
的第三个参数完成的:$(form).on('submit', null, data, function(event) {//...
然后可以通过
data
在回调中访问原始的event.data
。还要记住,您假设在调用验证回调之前已通过验证回调,如果没有,则会出错。