jQuery Validator Not Working if Fields aren’t displayed

1 Views

All,
I’m using WordPress and I’m using some shortcodes to display a toggle functionality. The theme I’m using is Mingle and an example of the toggle functionality can be found here:

http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056

Read More

You can click on Shortcodes -> Tabs and Toggles

This works perfectly and I have a form with some fields. If the toggle is open then the jQuery Validator works fine. However, if the toggles are closed jQuery doesn’t reconginze that there are fields in them and doesn’t check to see if they have a value. Is there a work around for this?

EDIT: Here is my current jQuery: 

$("#register").validate({
    ignore: "",
    rules: {
        vendor_email: {
            required: true,
            email: true
        },
        vendor_name: "required",
        zip: "required",
    },
    messages: {
        vendor_email: {
            required: "<br>Please enter an email address!<br><br>",
            email: "<br>Please enter a valid email address!<br><br>"
        },
        vendor_name: "<br>Please enter your vendor name!<br><br>",
        zip: "<br>Please enter a zip code!<br><br>",
    },
    highlight: function(element, errorClass) {
        alert(element);
        $(element).closest('togDesc').show();
        $(element).closest('toggleItem').find('.minus').removeClass('minus').addClass('plus');
    });
});

The highlight portion is causing an error and nothing to be validated. Any idea why?

Thanks in advance!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. By default, jQuery validation ignores hidden fields. Change the ignore to empty:

    $("#form").validate({
    ignore: "",
    ...
});

    If those elements are hidden, you might want to programatically toggle their parent open:

    $("#form").validate({
    ignore: "",
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        if(!$(element).is(":visible")) {
            $(element).closest('togDesc').show();
            $(element).closest('toggleItem').find('.minus').removeClass('minus').addClass('plus');
        }
    });
}

    There might be a built in function to toggle this open in mingle, but this should do it as well.