ReactiveRaven / jqBootstrapValidation

A JQuery validation framework for bootstrap forms.
http://reactiveraven.github.io/jqBootstrapValidation
MIT License
1.35k stars 332 forks source link

Can I use this pulgin for dynamic forms? #175

Closed vaibhav-jain closed 9 years ago

vaibhav-jain commented 9 years ago

I have a form on which I want to perform validation but this form can be changed dynamically. For example: Form for creating Authors and more then one Books can be added dynamically. Now I want to perform validation for this form. Is it possible with this plugin??? And on some fields I have some function call via onblur

vaibhav-jain commented 9 years ago

I am facing this issue Please have a look

eridanaeon commented 9 years ago

Yes you can but you need to make some modification on the code, at methods.init :

methods: {
    init: function (options) {
        var settings = $.extend(true, {}, defaults);
        settings.options = $.extend(true, settings.options, options);
        var $siblingElements = this;

        var uniqueForms = $.unique(
            $siblingElements.map(function () {
                return $(this).parents("form")[0];
            }).toArray()
        );

        //mod by acs
        $(uniqueForms).unbind("submit");

        $(uniqueForms).bind("submit", function (e) {
            var $form = $(this);
            var warningsFound = 0;
.
.
.
.

Reason for this is to prevent multiple validations, let's say blur event happened thrice, that would mean three validation actions leading to three calls to submitSuccess / submitError blocks.

Similar to what you're doing.... or close enough... validation selector is based on what the user chose, here's how it used it:

<select 
    id="tmf-001" class="span4" ng-model="Type" 
        ng-change="modalForm.initValidation();"
    required="" data-validation-required-message="select from list"
>
    <option value="">Please select</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
this.initValidation = function(){
    var selector1 = '#tmf-001, #tmf-002, #tmf-003, #tmf-004';
    var selector2 = '#tmf-001, #tmf-002, #tmf-004';
    var selector3 = '#tmf-001';
    var selector = '';

    //validation done based on action
    if(this.action === '1'){
        .       some code for selector
        .
        .
        .

    if(this.validator.jqBootstrapValidation){
        this.validator.jqBootstrapValidation('destroy'); //remove previous validations
        delete this.validator.jqBootstrapValidation;
    }

    this.validator = $(selector).not('[type=submit]').jqBootstrapValidation({
        preventSubmit: true,
        submitError: function ($form, event) {
            console.log('validation fail');
            //do whatever
        },
        submitSuccess: function ($form, event) {
            console.log('validation success, action : ', directive.action);
            //do whatever
        }
    });
};

You might also want to check this issue,https://github.com/ReactiveRaven/jqBootstrapValidation/issues/157, regarding calls to 'destroy'

vaibhav-jain commented 9 years ago

Thanks....