Formvalidation.io – TypeError: Cannot read property 'id' of null
<p>I'm having some issues with Formvalidator.io, and my guess is that it has something to do with my code nesting...</p>

<p>I'm getting an error on line 972 in code example below. The error is as follows:</p>

<pre><code>Uncaught TypeError: Cannot read property 'id' of null
</code></pre>

<p>Line 972 in the code is:</p>

<pre><code>var selected_department_id = $('#departmentName').select2('data').id;
</code></pre>

<p>The error fires when I try to validate the form.</p>

<p>On <code>console.log(selected_department_id)</code> I get the intended result, so I know the function is declared and working as intended.</p>

<p>Does anyone have any suggestions to what may be causing this error?</p>

<pre class="lang-js prettyprint-override"><code>$.map(corporations_info, function(obj) {

    obj.id = obj.id || obj.corporation_id; // replace pk with your identifier

    $('#corporationName').append($("&lt;option&gt;&lt;/option&gt;").attr("value", obj.id).text(obj.name));

    return obj;

});

$('#extensionSetup')
    .find('[name="corporationName"]')
    .select2({

        dropdownCssClass: 'dropdown-inverse',
        placeholder: 'Select your Corporation',
        minimumResultsForSearch: 5

    })
    .change(function(e) {

        //$('#extensionSetup').formValidation('revalidateField', 'departmentName');

    })
    .end()
    .find('[name="departmentName"]')
    .select2({

        dropdownCssClass: 'dropdown-inverse',
        placeholder: 'Select your Department',
        minimumResultsForSearch: 5

    })
    .on('select2-close', function() {

        //$('#extensionSetup').formValidation('revalidateField', 'departmentName');

    })
    .change(function(e) {

        //$('#extensionSetup').formValidation('revalidateField', 'departmentName');

    })
    .end()
    .find('[name="employeeName"]')
    .select2({

        dropdownCssClass: 'dropdown-inverse',
        placeholder: 'Find your name',
        minimumResultsForSearch: 5,
        containerCssClass: 'select2-custom-search',
        dropdownCssClass: 'select2-custom-search'

    })
    .on('select2-opening', function() {

        console.log('opening');

    })
    .on('select2-open', function() {

        $('body')
            .find('.select2-container.select2-custom-search')
            .addClass('in-focus');

        $('body')
            .find('.select2-container.select2-custom-search')
            .find('.select2-choice')
            .find('.select2-arrow')
            .addClass('in-focus');

        $('body')
            .find('.select2-drop.select2-custom-search')
            .find('.select2-search')
            .find('input')
            .attr("placeholder", "Find your name");

        $('body')
            .find('.select2-container.select2-custom-search')
            .find('.select2-choice')
            .find('.select2-chosen')
            .hide();

    })
    .on('select2-select', function() {

        $('body')
            .find('.select2-drop.select2-custom-search')
            .find('.select2-search')
            .find('input')
            .attr("placeholder", "");

        $('body')
            .find('.select2-container.select2-custom-search')
            .find('.select2-choice')
            .find('.select2-chosen')
            .show();

    })
    .on('select2-close', function() {

        $('body')
            .find('.select2-container.select2-custom-search')
            .removeClass('in-focus');

        $('body')
            .find('.select2-container.select2-custom-search')
            .find('.select2-choice')
            .find('.select2-arrow')
            .removeClass('in-focus');

        $('body')
            .find('.select2-container.select2-custom-search')
            .find('.select2-choice')
            .find('.select2-chosen')
            .addClass('selected')
            .show();

        console.log('close');

    })
    .on('select2-close', function() {

        $('.select2-custom-search .select2-search input')
            .closest('.input-group')
            .find('.input-group-addon')
            .removeClass('in-focus');

    })
    .end()
    .formValidation({
        framework: 'bootstrap',
        excluded: ':disabled',
        icon: {

            valid: 'material-icons valid-icon',
            invalid: 'material-icons invalid-icon',
            validating: 'material-icons validating-icon'

        },
        fields: {
            corporationName: {

                validators: {

                    callback: {

                        callback: function(value, validator, $field) {

                            if (value === '') {

                                return {

                                    valid: false,
                                    message: 'Please select the corporation you are associated with.',

                                };

                            }

                            return {

                                valid: true,

                            };

                        }
                    }

                }

            },
            departmentName: {

                validators: {

                    callback: {

                        callback: function(value, validator, $field) {

                            if (value === '') {

                                return {

                                    valid: false,
                                    message: 'Please select the department you are associated with.',

                                };

                            }

                            return {

                                valid: true,

                            };

                        }
                    }

                }

            }
        }
    })
    // This event will be triggered when the field passes given validator
    .on('success.validator.fv', function(e, data) {
        // data.field     --&gt; The field name
        // data.element   --&gt; The field element
        // data.result    --&gt; The result returned by the validator
        // data.validator --&gt; The validator name

        if (data.field === 'corporationName') {

            $('#step3')
                .find('.dialog-warning.employees')
                .fadeOut()

            var selected_corporation_id = $('#corporationName').select2('data').id;
            var selected_corporation_name = $('#corporationName').select2('data').text;

            //var selected_department = $('#departmentName').select2('data').id;

            var departments_data = $.map(departments_info, function(obj) {

                if (obj.corporation_id === selected_corporation_id) {

                    return obj;

                }

            });

            if (!departments_data.length) {

                //console.info('YES!');

                console.warn('This corporation has no departments.');

                data.element
                    .closest('.form-group')
                    .removeClass('has-success')
                    .addClass('has-error');

                data.element
                    .closest('.form-group')
                    .find('.form-control-feedback')
                    .removeClass('valid-icon')
                    .addClass('invalid-icon');

                data.element
                    .closest('.form-group')
                    .find('.help-block')
                    .attr("data-fv-result", "INVALID");

                $.when($('.container-for-departmentName').fadeOut()).done(function() {

                    $('#step3')
                        .find('.dialog-warning.departments')
                        .fadeIn()
                        .find('.corporationName')
                        .text(selected_corporation_name);

                    $('#step3')
                        .find('.next-step')
                        .addClass('reload')
                        .text('Reload');

                    $('#extensionSetup')
                        .find('[name="departmentName"]')
                        .select2("enable", false);

                });

            } else {

                //console.warn('FUBAR!');

                $('#extensionSetup')
                    .find('[name="departmentName"]')
                    .closest('.form-group')
                    .removeClass('has-error');

                $('#extensionSetup')
                    .find('[name="departmentName"]')
                    .closest('.form-group')
                    .find('.form-control-feedback')
                    .removeClass('invalid-icon');

                $('#extensionSetup')
                    .find('[name="departmentName"]')
                    .closest('.form-group')
                    .find('.help-block')
                    .attr("data-fv-result", "");

                $.when($('#step3').find('.dialog-warning.departments').fadeOut()).done(function() {

                    $.when($('#extensionSetup')
                        .find('[name="departmentName"]')
                        .select2('data', null)
                        .find('option')
                        .each(function() {

                            if ($(this).val() === '') {

                                // Do nothing to keep first option intact 

                            } else {

                                $(this).remove();
                            }

                        })).done(function() {

                        $('#step3')
                            .find('.next-step')
                            .removeClass('reload')
                            .text('Save and Continue');

                        $.map(departments_data, function(obj) {

                            obj.id = obj.id || obj.department_id; // replace pk with your identifier

                            $('#departmentName').append($("&lt;option&gt;&lt;/option&gt;").attr("value", obj.id).text(obj.name));

                            return obj;

                        });

                        $('#extensionSetup')
                            .find('[name="departmentName"]')
                            .select2("enable", true);

                        $('.container-for-departmentName').fadeIn();

                    });

                });

            }

        }

        if (data.field === 'departmentName') {

            var selected_department_id = $('#departmentName').select2('data').id;
            var selected_department_name = $('#departmentName').select2('data').text;

            var coworkers_data = $.map(coworkers_info, function(obj) {

                if (obj.department_id === selected_department_id) {

                    return obj;

                }

            });

            if (!coworkers_data.length) {

                console.warn('This Department has no employees');

                data.element
                    .closest('.form-group')
                    .removeClass('has-success')
                    .addClass('has-error');

                data.element
                    .closest('.form-group')
                    .find('.form-control-feedback')
                    .removeClass('valid-icon')
                    .addClass('invalid-icon');

                data.element
                    .closest('.form-group')
                    .find('.help-block')
                    .attr("data-fv-result", "INVALID");

                $('#step3')
                    .find('.dialog-warning.employees')
                    .fadeIn()
                    .find('.departmentName')
                    .text(selected_department_name);

                $('#step3')
                    .find('.next-step')
                    .addClass('reload')
                    .text('Reload');

                $('#extensionSetup')
                    .find('[name="employeeName"]')
                    .select2("enable", false);



            } else {

                data.element
                    .closest('.form-group')
                    .removeClass('has-error');

                data.element
                    .closest('.form-group')
                    .find('.form-control-feedback')
                    .removeClass('invalid-icon');

                data.element
                    .closest('.form-group')
                    .find('.help-block')
                    .attr("data-fv-result", "");

                $.when($('#step3')
                    .find('.dialog-warning.employees')
                    .fadeOut()).done(function() {

                    $.when($('#extensionSetup')
                        .find('[name="employeeName"]')
                        .select2('data', null)
                        .find('option')
                        .each(function() {

                            if ($(this).val() === '') {

                                // Do nothing to keep first option intact 

                            } else {

                                $(this).remove();
                            }

                        })).done(function() {

                        $('#step3')
                            .find('.next-step')
                            .removeClass('reload')
                            .text('Save and Continue');

                        $.map(coworkers_data, function(obj) {

                            obj.id = obj.id || obj.mobile_phone; // replace pk with your identifier

                            $('#employeeName').append($("&lt;option&gt;&lt;/option&gt;").attr("value", obj.id).text(obj.first_name + ' ' + obj.last_name));

                            return obj;

                        });

                        $('#extensionSetup')
                            .find('[name="employeeName"]')
                            .select2("enable", true);

                    });

                });

            }

        }

    })
    .bootstrapWizard({
        tabClass: 'nav nav-tabs',
        onTabClick: function(tab, navigation, index) {
            return validateTab(index);
        },
        onNext: function(tab, navigation, index) {
            var numTabs = $('#extensionSetup').find('.tab-pane').length,
                isValidTab = validateTab(index - 1);
            if (!isValidTab) {
                return false;
            }

            if (index === numTabs) {
                // We are at the last tab

                // Uncomment the following line to submit the form using the defaultSubmit() method
                // $('#extensionSetup').formValidation('defaultSubmit');

                // For testing purpose
                $('#completeModal').modal();
            }

            return true;
        },
        onPrevious: function(tab, navigation, index) {
            return validateTab(index + 1);
        },
        onTabShow: function(tab, navigation, index) {
            // Update the label of Next button when we are at the last tab
            var numTabs = $('#extensionSetup').find('.tab-pane').length;
            $('#extensionSetup')
                .find('.next-step ')
                .removeClass('disabled') // Enable the Next button
                .find('a')
                .html(index === numTabs - 1 ? 'Install' : 'Next');
        }
    });

function validateTab(index) {
    var fv = $('#extensionSetup').data('formValidation'), // FormValidation instance
        // The current tab
        $tab = $('#extensionSetup').find('.tab-pane').eq(index);

    // Validate the container
    fv.validateContainer($tab);

    var isValidStep = fv.isValidContainer($tab);
    if (isValidStep === false || isValidStep === null) {
        // Do not jump to the target tab
        return false;
    }

    return true;
}
</code></pre>