jquery validate plugin的問題

Question

我正在使用一個jquery驗證插件，我有以下代碼進行驗證這是令人不安的，它只是一個規范我想要的錯誤應該顯示在屏幕上

jQuery(document).ready(function() {
    jQuery('form.CWvalidate').each(function() {
        var alertID = jQuery(this).attr('id');
        jQuery(this).prepend('<div class="CWalertBox alertText validationAlert" style="display:none;"></div><div class="CWclear"></div>');
    });
    jQuery('form.CWvalidate select').change(function() {
        jQuery(this).blur();
    });
    jQuery.validator.setDefaults({
        focusInvalid: true,
        onkeyup: false,
        onblur: true,
        errorClass: "warning",
        errorElement: "span",
        errorPlacement: function(error, element) {
            jQuery(element).siblings('label').addClass('warning');
        },
        showErrors: function(errorMap, errorList) {
            if (this.numberOfInvalids() > 0) {
                var formID = jQuery(this.currentForm).attr('id');
                if (formID == 'CWformCustomer') {
                    var validationMessage = 'Complete all required information';
                } else if (formID == 'CWformLogin') {
                    var validationMessage = '';
                } else if (formID == 'CWformOrderSubmit') {
                    var validationMessage = 'Complete all required information';
                } else if (formID == 'CWformAddToCartWindow') {
                    var validationMessage = 'Select at least one item';
                } else if (formID == 'CWformAddToCart') {
                    var validationMessage = 'Choose from below options before adding to cart';
                } else {
                    var validationMessage = 'Complete your selection';
                };
                if (!(validationMessage == '')) {
                    jQuery(this.currentForm).find('.errormsg').show().html(validationMessage);
                };
                this.defaultShowErrors();
            } else {
                jQuery(this.currentForm).children('div.validationAlert').empty().hide();
                jQuery(this.currentForm).children('span.warning').remove();
                jQuery(this.currentForm).children('.warning').removeClass('warning');
            }
        }
    });
    jQuery('form.CWvalidate').each(function() {
        jQuery(this).validate();
    });
});

但每當我使用這個CWvalidate CWvalidate ，表單都會驗證，但表單的submithandler不會像我在下面的代碼中那樣使用它：

$("#dataModification").validate({
    submitHandler: function(form) {
    var datastring = $(form).serialize();
    $.ajax({
        type:"post",
        url: 'xyz.cfm',
        data: datastring,
        success: function(data) {
            var obj = $.trim(data);

            if (obj == 'success'){
                parent.$.fancybox.close();
            }else{
                alert(obj);
            }
          }
       });
    }
});

有什么問題我被困住了，不知道發生了什么......

Answer 1

你似乎在同一個表單上兩次調用.validate() ...

這里：

jQuery(document).ready(function() {
    ....
    jQuery('form.CWvalidate').each(function() {
        jQuery(this).validate();
    });
});

和這里：

$("#dataModification").validate({
    submitHandler: function(form) { 
    ...

僅使用第一個實例，並忽略任何后續實例，這解釋了為什么您的submitHandler無法正常工作且表單只是刷新。 它還解釋了為什么它只在使用CWvalidate類時失敗。

為了解決這個問題，你就必須弄清楚如何調用.validate()每每個窗體一次 。

一種可能的解決方法是將ajax URL放在form標簽的action屬性中，然后使用.attr('action')在.ajax()檢索此URL。 然后你的submitHandler可以足夠通用，可以包含在setDefaults() 。

submitHandler: function(form) {
    var datastring = $(form).serialize();
    $.ajax({
        type: "post",
        url: $(form).attr('action'), ...

---

另請注意：此插件沒有名為onblur選項。 它是onfocusout ，你不能在不破壞插件的情況下將其設置為true 。 它只能設置為false或函數 。