jQuery Validate shows empty alert on success

Question

I have a form which requires an alert validation for an "Agree Terms" checkbox as well as various fields which have error messages in spans. When I add the success function (so that the error messages will disappear once a valid entry has been made), the checkbox delivers a blank alert when it is checked, and the whole form gives a blank alert when validly submitted. Submission does go through once the alert has been OKed, but I need to get rid of these spurious alerts. Any ideas where I have gone wrong?

the relevant section of javascript is here

$('#REDcheckout').validate({
errorElement: 'span',
rules: {
    'email': {
        required: false,
        email: true
    },
        'first_name': {
        required: true
    },
        'last_name': {
        required: true
    },
        'member_address1': {
        required: true
    },
        'member_city': {
        required: true
    },
        'member_country': {
        required: true
    },
        'member_post_code': {
        required: true
    },
        'field_terms': {
        required: true
    }
},

messages: {
    email: 'You must enter a valid email address',
    first_name: 'You must enter your First Name',
    last_name: 'You must enter your Last Name (Surname)',
    member_address1: 'Enter your address (this is the delivery address)',
    member_city: 'Please enter your city',
    member_post_code: 'You must enter your Postcode or Zipcode or NA if there is none',
    field_terms: 'You must agree to the RED shop terms and conditions'
},
success: function (label, element) {
    label.parent().removeClass('error');
    label.remove();
},
errorPlacement: function (error, element) {
    if (element.is(':checkbox')) {
        alert(error.text());
    } else { // This is the default behavior
        error.insertAfter(element);
    }
}

});

and there is a jsfiddle here

Any ideas where I am going wrong and how to correct this?

Thanks in advance

Answer 1

I think the right way to do it is to use the showErrors() method

$('#REDcheckout').validate({
    errorElement: 'span',
    rules: {
        'email': {
            required: true,
            email: true
        },
            'first_name': {
            required: true
        },
            'last_name': {
            required: true
        },
            'member_address1': {
            required: true
        },
            'member_city': {
            required: true
        },
            'member_country': {
            required: true
        },
            'member_post_code': {
            required: true
        },
            'field_terms': {
            required: true
        }
    },

    messages: {
        email: 'You must enter a valid email address',
        first_name: 'You must enter your First Name',
        last_name: 'You must enter your Last Name (Surname)',
        member_address1: 'Enter your address (this is the delivery address)',
        member_city: 'Please enter your city',
        member_post_code: 'You must enter your Postcode or Zipcode or NA if there is none',
        field_terms: 'You must agree to the RED shop terms and conditions'
    },
    success: function (label, element) {
        label.parent().removeClass('error');
        label.remove();
    },
    showErrors: function (errorMap, errorList) {
        if (errorMap.field_terms) {
            alert(errorMap.field_terms)
            delete errorMap.field_terms;
        }
        this.defaultShowErrors();
    }
});

Demo: Fiddle

---

The problem is since you are not adding the error element to the target element, on every validate call the errorPlacement method is called for the checkbox(valid or not), so when the input is checked the errorPlacement is called with an empty error message

errorPlacement: function (error, element) {
    if (element.is(':checkbox')) {
        if (error.text().trim()) {
            alert(error.text());
        }
    } else { // This is the default behavior
        error.insertAfter(element);
    }
}

Demo: Fiddle