jquery 验证插件的问题

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 时，表单都会验证但表单的提交处理程序不会像下面的代码那样使用它：

$("#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 class.

时才会失败

要修复它，您必须弄清楚如何为每个表单调用 .validate() 一次。

一种可能的解决方法是将 ajax URL 放在 form 标签的 action 属性中，然后在 URL 中检索此 URL =19=] 使用 .attr('action')。然后你的 submitHandler 可以足够通用，可以包含在 setDefaults().

中

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

另请注意：此插件没有名为 onblur 的选项。它是 onfocusout，你不能在不破坏插件的情况下将它设置为 true。 It can only be set to false or a function.

jquery 验证插件的问题

issues with jquery validate plugin

javascript

jquery

jquery-validate