带有验证的JQuery表单保持刷新页面 - 没有发送请求后发送

Question

我在bootstrap网页上使用ajax表单，这非常简单（我想）。

这里的小提琴：

https://jsfiddle.net/aptwd1wb/2/

正如您在此处所见，我定义了此验证+提交处理：

 $('#formular').validate({
  ignore: [],
  rules: {
    headlinetext: {
      minlength: 3,
      maxlength: 100,
      required: true
    },
    image: {
      accept: "image/*",
      required: true,
    },
    select: {
      required: true,
    },
    summernoteinput: {
      summernoteMinimumSize: true,
      summernoteRequired: true,
    },

  },
  highlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
  },
  unhighlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.length) {
      error.insertAfter(element);
    } else {
      error.insertAfter(element);
    }
  },
  messages: {
    select: {
      required: 'Required'
    },
    image: {
      accept: 'NO!'
    }
  },

  submitHandler: function(error) {
    var file = $('#image')[0].files[0];
    $.post(
      'http://test.com' + "/myFile.php", {
        plant: $('#select').val(),
        headline: $('#headlinetext').val(),
        body: $('#summernote').summernote('code'),
        image: file
      }
    );

    return false;
  },

});

问题是，表单已正确验证，但是当按下提交按钮并且一切都有效时，submitHandler会强制页面重新加载。我使用过＆＃39; return false;＆＃39;为了避免这种情况，但没有任何改变。

刷新后，我得到了一个新的网址：

index.html?select=02&headlinetext=ghjhg+jhg+g+jhg+&image=some.PNG&files=&summernoteinput=

我只想通过ajax将输入提交到后端服务，然后显示成功消息。

我真的不知道这段代码有什么问题。

作为一个额外的问题：正如您可以在控制台中看到的那样，summernote插件会触发许多错误，例如：

为什么？....为什么？ 用了大约一个小时的谷歌搜索，但还没有找到解决方案。