title: Formvalidation.io – TypeError: Cannot read property 'id' of null
body: <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>