Take the 2-minute tour ×

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 = {
                    required: true
                Name: "Name is required",
                ShortName: "Short name is required"

    if (form.find("#ShortName").length == 1)
        $.extend(options.rules, { ShortName: { required: true} });


*   Initializes a newly loaded edit form
_initializeEdit: function (panel) {
    var thisDetailTab = this;
    var form = panel.find("form");
            target: panel,
            url: this._config.updateUrl,
            beforeSubmit: function (arr, $form, options) {
                return form.valid();
            success: function (responseText, statusText, xhr, form) {


    var cancelButton = panel.find(".cancelButton");
    cancelButton.click(function (event) {
                url: thisDetailTab._config.detailsUrl,
                success: function (data) {
share|improve this question
Could you paste some code about how you're using the ajaxform? I have experience with the validation plugin but not with ajaxform :( –  Claudio Redi Sep 8 '10 at 0:41
I've now added the valid() call to the beforeSubmit event. It seems to do what I want, and is fairly simple. For those in the know. Is this approach ok? Any pitfalls? Does a better way exist? –  GiddyUpHorsey Sep 8 '10 at 1:15

1 Answer 1

up vote 1 down vote accepted

Instead of .ajaxForm(), use .ajaxSubmit() in your submitHandler (which only fires on success), like this:

  rules: { ... },
  submitHandler: function(form) {
    $(form).ajaxSubmit({ ...options... });

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.

share|improve this answer
Before reading your answer I added a .valid() call to beforeSubmit which appears to work. Are you aware of any differences, pros/cons between the method you describe and the one I tried? –  GiddyUpHorsey Sep 8 '10 at 1:17
@GiddyUpHorsey - either way works, though unless you're removing the submit event handler, you may be running validation twice, but that's usually ok, if inefficient. –  Nick Craver Sep 8 '10 at 1:20

Your Answer


