jquery auto submits itself

Question

Anyone understand why this auto submits the form? Can`t seem to find the right answer to why it does that.

Using query parsley to validate the form in modal.

User open modal, user starts typing into the text area, you must at least type 20 characters and limit of 100. When you are over the 20, the form submits it self.

No matter what i do, i can`t prevent that for happening.

Any clue ?

Thanks =)

                  <div id="form-content" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                  <div class="modal-content">

                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span>
                      </button>
                      <h4 class="modal-title" id="myModalLabel2">Modal title</h4>
                    </div>
                    <div class="modal-body">
                <!-- start form for validation -->
                <form id="ReportForm">

                  <label for="fullname">Brukernavn :</label>
                  <input type="hidden" id="Username_Field" class="form-control" name="username" value="Kimmeliten" />

                      <label for="message">Message (20 chars min, 500 max) :</label>
                      <textarea id="message" required="required" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.." data-parsley-validation-threshold="10"></textarea>


                </form>
                <!-- end form for validations -->
                                </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary" id="submit10">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /modals -->

    <script>
  $(document).ready(function() {
    $.listen('parsley:field:validate', function() {
      validateFront();
    });
    $('#submit10').click(function(){
      $('#ReportForm').parsley().validate();
      validateFront();
    });
    var validateFront = function() {
      if (true === $('#ReportForm').parsley().isValid()) {
        $('.bs-callout-info').removeClass('hidden');
        $('.bs-callout-warning').addClass('hidden');
                  $.ajax({
                    type: "POST",
                        url: "forum/ajax/report.ajax.php",
                        data: $('#ReportForm').serialize(),
                success: function(msg){
                            $("#thanks").html(msg);
                        $("#form-content").modal('hide');   
                        },
                                error: function (xhr, ajaxOptions, thrownError) {
                                        alert(xhr.status);
                                        alert(thrownError);
                                      }
                });            

      } else {
        $('.bs-callout-info').addClass('hidden');
        $('.bs-callout-warning').removeClass('hidden');
      }
    };
  });
  try {
    hljs.initHighlightingOnLoad();
  } catch (err) {}
</script> 

Answer 1

Not really sure, but looking into the documentation, shows:

form:validate | Triggered when a form validation is triggered, before its validation.

Is seems, that your listener is fired as soon as you begin to validate, what triggers validateFront.

$.listen('parsley:field:validate', function() {
  validateFront();
});

Have you tried to listen to form:success instead?