Why is Uncaught TypeError: Cannot read property 'find' of undefined when submitting the form?

Question

JavaScript

main js code

(function(){
  var app = {

    initialize : function(){
      this.modules();
      this.setUpListeners();
    },

    modules : function(){

    },

    setUpListeners : function(){
      $('form').on('submit', app.submitForm);
    },

    submitForm : function(e){
      e.preventDefault();
      var form = $(this);
      if (app.validateForm() === false) return false;
      console.log('ajax');
    },

    validateForm : function(form){
      var inputs = form.find('input'),
        valid = true;

      input.tooltip('destroy');

      $.each(inputs, function(index, val){
        var input = $(val),
          val = input.val(),
          formGroup = input.parents('.formGroup'),
          label = formGroup.find('label').text().toLowerCase(),
          textError = 'Введите' + label;
        if (val.length === 0 ){
          formGroup.addClass('has-error').removeClass('has-success');
          input.tooltip({
            trigger : 'manual',
            placemant : 'right',
            title: textError
          }).tooltip('show');
          valid = false;
        } else {
          formGroup.addClass('has-success').removeClass('has-error');
        }
      });
      return valid;
    }
  }
  app.initialize();
}());

html

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputName" class="col-sm-3 control-label">Имя</label>
    <div class="col-sm-9">
      <input type="text" name="name" class="form-control" id="inputName" placeholder="Введите ваше имя">
    </div>
  </div>
  <div class="form-group">
    <label for="inputMail" class="col-sm-3 control-label">Email</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputMail" placeholder="Введите вашу почту">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPhone" class="col-sm-3 control-label">Телефон</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputPhone" placeholder="Введите ваш телефон">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success">Отправить</button>
    </div>
  </div>
</form>

when you click on submit, unfilled forms should be highlighted, but it writes an error, why?

Answer 1

So you don't pass anything to validateForm