Form get submitted even the form validation fails

Question

I am using http://www.formvalidator.net/index.html to validate my form but the form gets submitted even when the validation get failed.

Form code:

<form name="add-todo" class="form-horizontal" action="" method="post">
  <h5>Add New Item</h5>
  <div class="form-group">
    <div class="col-md-12">
      <input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-12">
      <button type="submit" class="btn btn-primary btn-add">Add</button>
    </div>
  </div>
</form>

jQuery code:

$(document).ready(function() {
  $.validate({
    modules: 'security'
  });

  $('form[name=add-todo]').submit(function(e) {
    e.preventDefault();

    var text = $("#todo-text-input").val();
    $('.btn-add').text('Saving ....');

    $.ajax({
      url: this.action,
      type: this.method,
      data: {
        text: text
      },
      success: function(response) {
        $("#todo-text-input").empty();
        $('.messages').removeClass('hide-element');
        $('.alert').addClass('alert-success');
        $('.alert').text('To do item added successfully.');

        $('.alert').fadeTo(2000, 500).slideUp(500, function() {
          $('.alert').slideUp(500);
        });
      }
    });
  });
});

Answer 1

dont use submit button. You can use

<button type="button" class="btn btn-primary btn-add">Add</button>

after that check your validation status. if its valid then submit the form.

Answer 2

<input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">

In your input field you don't need to use data-validation="required" just use required like

< input type="text" required class="form-control" id="todo-text-input" name="todo-text">

Answer 3

Please change you form validation code configuration like this:

$.validate({
    form : '#registration-form',
    modules : 'security',
    onSuccess : function($form) {
      alert('The form '+$form.attr('id')+' is valid!');
       // write your ajax code to submit form data on server
      return false; // Will stop the submission of the form
    }
  });

For more info follow:

http://www.formvalidator.net/index.html#configuration