How do I stop form elements that are not visible from being validated? about jqbootstrapvalidation HOT 13 CLOSED

@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 :)

from jqbootstrapvalidation.

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

from jqbootstrapvalidation.

$(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!

from jqbootstrapvalidation.

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

from jqbootstrapvalidation.

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)

from jqbootstrapvalidation.

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?

from jqbootstrapvalidation.

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!

from jqbootstrapvalidation.

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

from jqbootstrapvalidation.

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

from jqbootstrapvalidation.

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

from jqbootstrapvalidation.

@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?

from jqbootstrapvalidation.

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

from jqbootstrapvalidation.

Hi @ReactiveRaven @cleentfaar
I am sure this is going to be very very simple for a Guru like you
In a nutshell All i have been trying to achieve is to validate a select field with jqBootstrapValidation.
This is my html code below

<div class="form-group"> <select class="form-control" id="choice" name="choice" required="required" data-validation-required-message="Please Choose."> <option value="" disabled="disabled"></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p class="help-block text-danger"></p> </div>

Here is my javascript

`$(function() {

$("#contactForm input,#contactForm textarea,#contactForm select").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},`

So far i have not been able to get the select fields to validate as input and textarea
Any help will be appreciated here

Thanks

from jqbootstrapvalidation.