将 ajaxform 与 jQuery 验证结合使用的最佳方法是什么?
我正在使用 ajaxform jQuery 插件创建 ajaxed HTML 表单并希望使用 jQuery 验证 插件。
我不确定实现此目的的最佳方法是什么。
它对我来说不是开箱即用的。我使用 form.ajaxform({})
设置表单,然后使用 form.validate({})
设置验证。 invalidHandler 事件在验证插件上触发,但 ajaxform 仍然提交表单。
如何正确连接两者?
我的代码:
_initializeValidation: function (form) {
var options = {
rules:
{
Name:
{
required: true
}
},
messages:
{
Name: "Name is required",
ShortName: "Short name is required"
}
};
if (form.find("#ShortName").length == 1)
$.extend(options.rules, { ShortName: { required: true} });
form.validate(options);
}
/*
* Initializes a newly loaded edit form
*/
_initializeEdit: function (panel) {
var thisDetailTab = this;
var form = panel.find("form");
form.ajaxForm(
{
target: panel,
url: this._config.updateUrl,
beforeSubmit: function (arr, $form, options) {
return form.valid();
},
success: function (responseText, statusText, xhr, form) {
thisDetailTab._initializeDetails(panel);
thisDetailTab._config.refreshSummary();
}
}
);
this._initializeValidation(form);
var cancelButton = panel.find(".cancelButton");
cancelButton.click(function (event) {
$.ajax(
{
url: thisDetailTab._config.detailsUrl,
success: function (data) {
panel.empty();
panel.append(data);
thisDetailTab._initializeDetails(panel);
}
}
);
});
}
I'm using the ajaxform jQuery plugin to create ajaxed HTML forms and want to implement validation using the jQuery Validation plugin.
I'm not sure what is the best way to implement this.
It doesn't work out-of-the-box for me. I set up the form with form.ajaxform({})
and then set up validation with form.validate({})
. The invalidHandler event fires on the validation plugin, but ajaxform still submits the form.
How do I wire the two up properly?
My code:
_initializeValidation: function (form) {
var options = {
rules:
{
Name:
{
required: true
}
},
messages:
{
Name: "Name is required",
ShortName: "Short name is required"
}
};
if (form.find("#ShortName").length == 1)
$.extend(options.rules, { ShortName: { required: true} });
form.validate(options);
}
/*
* Initializes a newly loaded edit form
*/
_initializeEdit: function (panel) {
var thisDetailTab = this;
var form = panel.find("form");
form.ajaxForm(
{
target: panel,
url: this._config.updateUrl,
beforeSubmit: function (arr, $form, options) {
return form.valid();
},
success: function (responseText, statusText, xhr, form) {
thisDetailTab._initializeDetails(panel);
thisDetailTab._config.refreshSummary();
}
}
);
this._initializeValidation(form);
var cancelButton = panel.find(".cancelButton");
cancelButton.click(function (event) {
$.ajax(
{
url: thisDetailTab._config.detailsUrl,
success: function (data) {
panel.empty();
panel.append(data);
thisDetailTab._initializeDetails(panel);
}
}
);
});
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用
.ajaxSubmit()
在您的submitHandler
(仅在成功时触发),如下所示:这样它只会尝试执行以下操作如果验证成功,则 AJAX 提交(否则将触发
invalidHandler
)。如果您想查看实时示例,请查看相关验证插件演示< /a>.Instead of
.ajaxForm()
, use.ajaxSubmit()
in yoursubmitHandler
(which only fires on success), like this:This way it only attempts to do an AJAX submission if the validation is successful (otherwise the
invalidHandler
is fired). If you want to see a live example, here's the related validation plugin demo.