jQuery Steps and validation of multiple panels

Question

I have a simple wizard made of three simple steps.

In the first two steps I have some form controls with a couple of select control which are handled by the chosen plugin

<div class="col-lg-6 col-lg-offset-1">
    <label for="ExpirationMode" class="control-label">Da operazione</label>
    <div class="">
        <select name="ExpirationMode" id="ExpirationMode"
                class="chosen-select form-control" data-placeholder="Select an item" data-rule-required="true" data-msg-required="Required field">
            <option value=""></option>
            @foreach ( ExpirationModeViewModel e in expirationModeList ) {
                <option value="@e.ExpirationModeID">@e.Description</option>
            }
        </select>
    </div>
</div>

with the following javascript

$('.chosen-select').chosen({
    disable_search_threshold: 10,
    no_results_text: 'Oops, no results found',
    allow_single_deselect: true,
    width: '100%'
});

To handle the validation with the chosen plugin I have added the following validator settings in the onStepChanging event

onStepChanging: function (event, currentIndex, newIndex) {
    // Disable validation on fields that are disabled or hidden.
    form.validate().settings.ignore = ":disabled,:hidden:not('select.form-control')";
    // Start validation; Prevent going forward if false
    return form.valid();
},

The problem happens when I add another chosen select in the second panel. The instruction form.validate().settings.ignore = ":disabled,:hidden:not('select.form-control')"; is trying to validate also the chosen elements that are in the second panel.

How can I solve this? Can I tell the validator to validate only the controls contained in the current panel?

In your `ignore` settings you're telling it NOT to ignore *any* of the Chosen elements. However, you still need to ignore the Chosen elements in the hidden panels, so adjust your `ignore` setting to be more specific. Should be simple enough, so not sure how you're stuck. — Sparky, Aug 31 '15 at 14:36
Where *exactly* did you put the `onStepChanging` option/function? You said *"I have added the following validator settings"*, however, there is **no such** jQuery Validate option called `onStepChanging`. — Sparky, Aug 31 '15 at 14:37
@Sparky: thank you for your answer. Please excuse my poor english. The `onStepChanging` is an event handler from jquery Steps plugin. I think I am getting stuck exactly on the fact that i dont know how to instruct jQuery Validate to ignore the chosen elements in the hidden panels as you correctly pointed out — Lorenzo, Aug 31 '15 at 14:59
Ok, then I'm not sure how you're going to solve this. The jQuery Validate plugin will ignore all hidden elements which is precisely how it's able to work with the jQuery Steps plugin. However, in order to use Chosen, you MUST be able to validate certain hidden elements. So you'll have to figure out how to ignore hidden Chosen elements, but ONLY when they are hidden by Steps. Not sure how to do this... does Steps give you a custom selector that allows you to target only the elements within the current step? — Sparky, Aug 31 '15 at 15:07
I think so. I have seen, in another example of steps that he use a selector like this one to remove the validation labels for the current panel when the user hit the Previous button. `$(".body:eq(" + newIndex + ") label.error", form).remove();`. This seems to me that is removing the elements with class `label.error` only when found inside the element with class `body` equal to a certain index. However how can i use a selector like this in jquery validate? — Lorenzo, Aug 31 '15 at 15:19
Instead, why not add/remove a class to the inactive or active Chosen element? Then you can use the class as a selector within `ignore`. — Sparky, Aug 31 '15 at 15:42

score 1 · Accepted Answer · answered Sep 01 '15 at 18:12

If I got you right, I have similar problem. Here's the workaround I've found. In onStepChanging I added this piece of code:

if (newIndex === 1) {
   form.validate().settings.ignore = ":disabled,:hidden:not(#partner)";
} else if (newIndex === 2) {
   form.validate().settings.ignore = ":disabled,:hidden:not(#partner2)";
} else {
   form.validate().settings.ignore = ":disabled,:hidden";
}

Where #partner and #partner2 are IDs of two <select> elements.

Hope it helps; works fine for me.

Thank you. I have tried to find a more general solution based on a single selector but in effect this one was the quickest way. — Lorenzo, Sep 01 '15 at 23:24

jQuery Steps and validation of multiple panels

1 Answers1