data-validate not working (Dynamically changed)

[xxRockOnxx]

I have a select that is being selectize (selectize.js) and I know that it will make the original select display:none so I added data-validate="true" on the original select element.

Calling validator('validate') does not include that select. I thought adding data-validate includes it in the validation??

[1000hz]

Can you post an example on JS Bin?
http://jsbin.com/mirekiforo/1/edit?html,js,output

[xxRockOnxx]

http://jsbin.com/xokiguxemu/1/edit?html,js,output

try to delete the selectize part on the JS to make it regular select again and it should work

[1000hz]

Your example was throwing a ReferenceError because you were accessing the variable form without it being defined.

I changed it to $('form') and it's working now.
http://jsbin.com/gubeyaheco/1/edit?html,js,output

[xxRockOnxx]

Don't see any errors http://jsbin.com/zipasehoqe/1/edit?html,js,output

No more reference issue. The one you gave has one. Can you please include a screenshot?

[1000hz]

Your first example:

My example:

Your new example:

As you can see, your new example and my example behave the same way, with error messages being shown if the field is interacted with and a value is not chosen..

[xxRockOnxx]

Ok, I think now know how to make the error come out. We had a bit of misunderstanding I guess? How did you make the errors come out? Cause when invoking the validate upon pressing the submit button, the error would not come out. I can only make it come out if I click on the select and then click outside to make it "blur" then that's when the error would come out.

Is this the expected behavior sir?

[xxRockOnxx]

We had a misunderstanding here.

calling form.validator('validate') upon clicking of the button does not show the error. Please reconsider this issue.

[1000hz]

Looks like the issue is that selectize is creating the replacement dropdown inside of the same form-group. The selectize dropdown has an input inside of it that's clobbering the form-group's errors, so the validator thinks the field is ok.

You can tell the validator to ignore the selectize input by adding this line to your code:

$.fn.validator.Constructor.INPUT_SELECTOR += ':not(.selectize-input input)'

http://jsbin.com/pusagasisu/edit?html,js,output

[xxRockOnxx]

Thanks! This is really helpful

[xxRockOnxx]

So, again, data-validate has some issue if being changed dynamically, even if update is called.
Look at the jsbin I made:

http://jsbin.com/zeqaqizege/edit?js,console,output

Is the update meant for new input elements being inserted or any changes on the form? Cause for sure it does not work. Look at the console.log also. I make it sure that the values are changed.

It works if data-validate="true/false" is there on initialization but when changed view .data() it doe not

EDIT: ( I am really 100% sure about this now)

Yep, even not being changed via button click. Try putting data-validate on the input itself to whatever value. Then changed it via .data() before even initializing the plugin (Note: Initializing not Update) it will still read the value from the input.

Thanks again for considering this issue.

[xxRockOnxx]

Ok, tried experimenting. Using .attr() works, but .prop() and .data() doesn't.

Seems like it's the plugin that has problem now and not me or jQuery bug or anything. Tried on Chrome and Firefox. Are you reading the data-validate using .attr() instead of .data() ? Seems like it is

[1000hz]

Yeah, you need to use .attr(). Here's a slightly updated example
http://jsbin.com/jonibapuha/1/edit?html,js,console,output

I should probably clear out the errors from fields with data-validate="false" and also update the Submit button status after .validator('update')

[xxRockOnxx]

Saw that you were doing: https://github.com/1000hz/bootstrap-validator/blob/master/dist/validator.js#L91
that. Is it possible if you'll be filtering what you have found using .data() instead? Would like to make a pull request but I don't know how to do it hahaha

 Validator.prototype.update = function () {
    var allChildren = this.$element.find('*');

    this.$inputs = this.$element.find(Validator.INPUT_SELECTOR)
        .add(allChildren.filter(function() {
            return $(this).data('validate');
        })
        .not(allChildren.filter(function() {
            return !$(this).data('validate');
        }));

    return this;
}

Something like that

EDIT:

Managed the errors by destroying and then re-initializing it. May not work on some cases tho. Hope you could fix this.

[xxRockOnxx]

Solution for errors not being removed after update / Still being validated after data-validate="false"

Instead of setting data-validate="false" via .attr(), just remove that property/attribute instead using .removeProp()

Then do .validator('update') afterwards or in some cases .trigger('input') / .trigger('focusout') on all the inputs or selected inputs only

Hope the author @1000hz will fix these issues.

Hopes these updates will become possible:

• Set the data-validate using .data() (Some users on #jQuery channel at freenode recommends it that way because of performance stuffs).
• data-validate="false" on .validator('update') still being validated. Maybe because it is still included in the "SELECTOR" variable/property and not being removed. Hope this will be fixed too.