How can you dynamically trigger validation of a single field? about jqbootstrapvalidation

[settugowtham]

Anyone have solution for this issue. I'm too facing the same issue.

Thanks,
Settu Gowtham

[bosborn52]

I don't know if this helps anyone, but I wanted a way to validate preloaded forms that are dynamically loaded with ajax. I added another function to the source code by stealing parts of the init function. This probably isn't the right way, but it worked.

            isValid: function(options) {
                var
                    $this = $(this),
                    $controlGroup = $this.parents(".form-group").first(),
                    $helpBlock = $controlGroup.find(".help-block").first(),
                    $formControl = $this,
                    errorsFound = [],
                    value = getValue($this),
                    settings = $.extend(true, {}, defaults);

                settings.options = $.extend(true, settings.options, options);
                // create message container if not exists
                if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) {
                    $helpBlock = $('<div class="help-block" />');
                    $controlGroup.append($helpBlock);
                    createdElements.push($helpBlock[0]);
                }

                console.log($controlGroup)

                $controlGroup.find("input,textarea,select").each(function(i, el) {
                    var oldCount = errorsFound.length;
                    $.each($(el).triggerHandler("validation.validation") || [], function(j, message) {
                        errorsFound.push(message);
                    });
                    if (errorsFound.length > oldCount) {
                        $(el).attr("aria-invalid", "true");
                    } else {
                        var original = $this.data("original-aria-invalid");
                        $(el).attr("aria-invalid", (original !== undefined ? original : false));
                    }

                    errorsFound = $.unique(errorsFound.sort());

                    // Were there any errors?
                    if (errorsFound.length) {
                        // How many errors did we find?
                        if (settings.options.semanticallyStrict && errorsFound.length === 1) {
                            // Only one? Being strict? Just output it.
                            helpDiv = '<div class="mb-10 alert alert-custom alert-light-warning alert-dismissible" role="alert">\
                                            <div class="alert-text font-weight-bold ">' + errorsFound[0] + '</div>\
                                            <div class="alert-close">\
                                                <i class="ki ki-remove" data-dismiss="alert"></i>\
                                            </div>\
                                        </div>'
                            $helpBlock.html(helpDiv +
                                (settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : ""));


                        } else {
                            helpDiv = '<div class="alert alert-custom alert-light-danger alert-dismissible" role="alert">\
                                <div class="alert-text font-weight-bold ">' + "<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" + '</div>\
                                <div class="alert-close">\
                                    <i class="ki ki-remove" data-dismiss="alert"></i>\
                                </div>\
                            </div>'
                            $helpBlock.html(helpDiv +
                                (settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : ""));
                        }
                    } else {
                        $controlGroup.removeClass("warning error success");
                        $formControl.removeClass("is-valid is-invalid");
                        if (value.length > 0) {
                            $controlGroup.addClass("success");
                            $formControl.addClass("is-valid");
                        }
                        $helpBlock.html($helpBlock.data("original-contents"));
                    }
                });
            },

To call it in my use case:

function showEditModal(data) {
    editProjectionForm(data)

    $('#edit-modal').modal('show');
    modal = $('#edit-modal')
    modal.one('shown.bs.modal', function() {
        var form = $(this).find('.modal-content form').closest("form")[0];

        for (var i = 0; i < form.elements.length; i++) {
            var e = form.elements[i];
            console.log(e.id)
            $('#' + e.id + '').jqBootstrapValidation("isValid")

        }
    }).one('hidden.bs.modal', function() {
        $("#form-div").empty();
    });

}