How do I stop form elements that are not visible from being validated?

[benscammell]

I have a form with two parts, each inside a div.

I show and hide these divs based on a drop down.

How do I stop the form items inside the hidden div from being validated?

Or is there a better way for me to create this dynamic form?

Thanks,

Ben

[cleentfaar]

Could you post your initiator (e.g.: the javascript that binds 'jqBootsrapValidation' on your input elements), it should look something like:

$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } ); 

As you can see in the example above, you can exclude certain elements from the validation by using the 'not(...)'-part and putting 'div.your-special-class > input' in it.

If you would give your (hidden) div some special class, you can use that to separate it from the rest.

Again, if you post your jqBootstrapValidation initiator, I can help you more

[benscammell]

$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );

I have a drop down that selects a or b then a div with an id of a, and a div with id of b, and I only want the form objects in the visible div to be validated.

Thanks in advance!

[benscammell]

So I need to dynamically change what's being validated and what's not based on the selection of the dropdown.

[cleentfaar]

The div you would not like to be validated could be written like
<div class="dont-validate"><input type="text"/></div>

Adding this class is important, perhaps you are using PHP, then use it to determine which div should get this dont-validate class.

Then in your initiator:

$(function () { $("input,select,textarea").not("[type=submit],div.dont-validate > input").jqBootstrapValidation(); } );

If you are actually creating these sub-divs after the page has been loaded, it could be necessary to add a live()-call in your initiator like so:

$(function () { $("input,select,textarea").not("[type=submit],div.dont-validate > input").live().jqBootstrapValidation(); } );

This binds any newly created elements after pageload to this initiator.

I'm sorry if this doesn't help you yet, and if all fails, compress your entire HTML and JS as a zip-file or something, and send it to me. I'm happy to have a look when I find some time (this weekend)

[benscammell]

Thank you!

That's interesting, but not quite what I need.

Is there a way in JS that I can switch validation on and off on a div, eg. based on a selection of a dropbox?

Basically, what do I need to call to toggle the validation on a div in JS after the page has been loaded?

[cleentfaar]

After having another look at the documentation (http://reactiveraven.github.com/jqBootstrapValidation/), I could not find a dedicated event to handle the things you mention, like 'destroy validation on field X and create validation on field Y' dynamically; and more importantly, after jqBootstrapValidation has initiated.

I would be happy to create a PR for this in the weekend, seeing how this can help others as well.

If interested, let me know!

PS @ReactiveRaven
If you're reading this, it would be great to have your views on this, and if we are perhaps missing something!

[benscammell]

With jquery.validate hidden components are ignored from validation. This is probably the best approach, as would cover tabbed and stepped forms without any code. I'm not a JS expert so not sure how hard this is to achieve?

It would be then useful to add some mothods to add and destroy indivudual validation on an object after jqBV has been inititated, for people that want to do really custom stuff.

Thanks,

Ben

[ReactiveRaven]

@benscammell I'm afraid this is a massive oversight on my part. When I was writing jqBV I was only thinking of simple forms.

I've updated the options to include a 'filter' option, which will allow you to filter out elements and ignore their validators during a submit. Change your initiator to look like this:

$(function () { 
    $("input,select,textarea").not("[type=submit]").jqBootstrapValidation({
        filter: function () {
            return $(this).is(":visible");
        }
    }); 
} );

(remember to download a new copy of jqBV)

If the filter function returns false, the element's validation is ignored on submit. this is the element to check. So in the above we're only interested in the validation result if the element is visible.

This doesn't affect non-submitting validation, so you can still get validation error messages from non-visible fields by using the collectErrors function (see docs).

Please re-open and/or comment if this doesn't solve your issue.

@Cas87 Thanks for helping out and offering a PR :)

[benscammell]

Tested, worked first time. Fantastic, Thank you very much.

[cleentfaar]

@ReactiveRaven Nice work! Thanks for helping out, this is going to be useful for my projects too!

[nieldw]

@ReactiveRaven, this looks like a really nice feature. You said that

"This doesn't affect non-submitting validation".

My form isn't ever submitted (I extract the input and send it with ajax), and I've tried to use the ":enabled" filter, but my disabled fields are still validated. Even if I return false outright, the validation still happens. Do I need anything special to make it work?

[jeremyarntz]

How would I handle situation where after the page is loaded the user can hide and unhide form fields?