Каков наилучший подход для использования ajaxform с проверкой jQuery? - PullRequest
Новая
       21

Каков наилучший подход для использования ajaxform с проверкой jQuery?

0 голосов
/ 08 сентября 2010

Я использую плагин ajaxform jQuery для создания Ajaxed HTML-форм и хочу реализовать проверку с использованием jQuery Validation .

Я не уверен, что это лучший способ реализовать это.

Это не работает "из коробки" для меня.Я настроил форму с помощью 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);
                }
            }
        );
    });
}

1 Ответ

1 голос
/ 08 сентября 2010

Вместо .ajaxForm() используйте .ajaxSubmit() в вашем submitHandler (который срабатывает только при успехе), например: 

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

Таким образом, он только пытается выполнить отправку AJAX, если проверка прошла успешно (в противном случае invalidHandler запускается).Если вы хотите увидеть живой пример, вот соответствующая демонстрационная версия плагина проверки .

...