在不删除html5验证的情况下使用preventDefault

Question

我用标准的html验证创建了以下表单.对于这种形式,我想在按下提交按钮时避免刷新页面.因此我在我的jquery代码中添加了preventDefault().通过不刷新页面工作,但它也删除了html5验证？我怎么能同时申请这两件事？

形成

<form method="post" action="">

    <div class="reg_section personal_info">
        <input type="text" name="username" id="title" value="" placeholder="title" required="required" maxlength="25">
        <textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="100"></textarea>
        </div>


    <div>
          <span class="submit" style="text-align: left; padding: 0 10px;"><input type="submit" id="insert" value="Tilføj"></span>
          <span class="submit" style="text-align: right; padding: 0 10px;"><input TYPE="button" value="Fortryd" onclick="div_hide();"></span>
    </div>

</form>

jQuery的

  $("#insert").click(function(e) {
    e.preventDefault(); // prevent default form submit


    if(!$('#description').val() == "" && !$('#title').val() == "" && $('#description').val().length >= 100) {



      div_hide();

      $.post("insert.php",
      {
         title:  $('#title').val(),
         body: $('#description').val(),
         longitude: currentMarker.lng(),
         latitude: currentMarker.lat()
      },
      function (data) { //success callback function



    }).error(function () {

    });


    }
});

Answer 1

单击处理程序,您可以检查表单是否有效:

// prevent default form submit if valid, otherwise, not prevent default behaviour so the HTML5 validation behaviour can take place

if($(this).closest('form')[0].checkValidity()){
    e.preventDefault();
}

-jsFiddle-

Answer 2

尝试这个：

\n\n

$( document ).ready(function() {\n  $("#insert").click(function(e) {\n    if($(\'#description\').val() != "" && $(\'#title\').val() != "" && $(\'#description\').val().length >= 5) {\n      div_hide();\n      $.post("insert.php",\n      {\n         title:  $(\'#title\').val(),\n         body: $(\'#description\').val(),\n         longitude: currentMarker.lng(),\n         latitude: currentMarker.lat()\n      },\n      function (data) { //success callback function\n    }).error(function () {\n    });\n    }\n  });\n\n  $("form").submit(function(e){\n     e.preventDefault();\n  });\n});\n

\n\n

并将插入按钮类型更改为提交：

\n\n

<input type="submit" id="insert" value="Tilf\xc3\xb8j"></span>\n

\n