issues with jquery validate plugin

Question

I am using a jquery validation Plugin, I had the following code for validation which is troubling, it is just a specification how i want the error should display on the screen

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();
    });
});

but whenever I ma using this classwhich is CWvalidate , the form validates but the submithandler of the form does not which i use it like below code:

$("#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);
            }
          }
       });
    }
});

What is wrong I am stuck and do not know what is going on...

Answer 1

You seem to be calling .validate() twice on the same form...

Here:

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

And here:

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

Only the first instance is used and any subsequent instances are ignored, which explains why your submitHandler is not working and the form simply refreshes. It also explains why it only fails when using your CWvalidate class.

To fix it, you'll have to figure out how to call .validate() one time per each form.

One possible workaround would be to put your ajax URL within the action attribute of the form tag and then retrieve this URL within .ajax() using .attr('action') . Then your submitHandler can be generic enough to be included within setDefaults() .

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

---

Also note: There is no such option called onblur for this plugin. It's onfocusout and you cannot set it to true without breaking the plugin. It can only be set to false or a function .