Error refererirme to the value of an element in jquery

$(function(){
  /**
   * Sólo para fines de depuración.
   */
  $.fn.logger = function (val) {
    var $this = $(this);
    $this.stop().animate({
    	scrollTop: $this.prop('scrollHeight')
    }, 1000);
    $this.append($('<p>', {text: val}));
  }
  
  var $log = $('#log');
  $('form').on('submit', function(e) {
    $log.logger('===== '+ new Date());
    
    var nameTab = $('#tab-name').val();
    $log.logger('Se registra: '+nameTab);
    
    /**
     * Si no se añade el gato (#) o símbolo numérico,
     * lo añado al principio de la cadena.
     */
    if (!/^#/.test(nameTab)) {
      nameTab = '#'+nameTab;
      $log.logger('Añadido el símbolo numérico (#): '+nameTab);
    }
    
    console.log($(nameTab).data());
    
    $('a[href="'+nameTab+'"]').tab('show');
    $log.logger('Activado: $(\'a[href="'+nameTab+'"]\').tab(\'show\')');
    
    e.preventDefault();
    e.stopPropagation();
  });
});

#log {
  height: 100px;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">

  <form class="col-xs-6 col-sm-6">
    <label for="tab-name">Nombre de la pestaña</label>
    <input type="text" id="tab-name" placeholder="#ejemplo" required />
    <button type="submit">Activar</button>
  </form>
  
  <div class="col-xs-6 col-sm-6">
    <h3>Log</h3>
    <div class="row" id="log"></div>
  </div>
  
</div>

<hr />

<div>

  <!-- Lista de pestañas -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#primera" aria-controls="primera" role="tab" data-toggle="tab">Tab: #primera</a>
    </li>
    <li role="presentation">
      <a href="#segunda" aria-controls="segunda" role="tab" data-toggle="tab">Tab: #segunda</a>
    </li>
    <li role="presentation">
      <a href="#tercera" aria-controls="tercera" role="tab" data-toggle="tab">Tab: #tercera</a>
    </li>
  </ul>

  <!-- Pestañas -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="primera">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum justo vitae urna condimentum aliquet. Nam accumsan ultrices posuere. Maecenas a orci viverra libero dictum efficitur. Proin suscipit nibh lectus, nec elementum est vehicula quis. Praesent euismod, enim ut viverra convallis, nunc nibh accumsan enim, ac mattis eros velit at erat. Integer pretium libero nec rhoncus elementum. Nulla tristique sodales urna nec semper. Morbi sapien turpis, lobortis eu convallis sed, fringilla quis ex. Donec nec placerat enim.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="segunda">
      <p>Quisque pharetra lorem vel enim iaculis, a pharetra nunc sagittis. Sed at dapibus ante. Duis viverra imperdiet aliquam. Praesent nulla est, venenatis vitae luctus quis, finibus et leo. Nulla dapibus lobortis tempus. Aliquam efficitur vestibulum libero, facilisis finibus augue finibus congue. Sed laoreet vestibulum nisi vitae sodales.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="tercera">
      <p>Vivamus in sapien ultrices risus imperdiet varius vel in metus. Sed in nisl tincidunt, vehicula augue eu, laoreet elit. Nulla quis nisl augue. Duis at molestie neque. Praesent cursus dui vitae elit mattis, eu pellentesque urna convallis. Praesent lobortis purus eu massa vehicula, sed consequat dolor tempor. Donec at imperdiet lectus, id hendrerit odio. Morbi iaculis est eget nibh imperdiet, nec porttitor turpis condimentum.</p>
    </div>
  </div>

</div>