preventDefault 不删除 html5 验证答案

【问题标题】：preventDefault without removing html5 validationpreventDefault 不删除 html5 验证
【发布时间】：2016-05-11 11:29:42
【问题描述】：

我创建了以下带有标准 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 () {

    });


    }
});

【问题讨论】：

它正在取消 HTML5 验证，因为您没有提交表单。当您尝试提交不符合字段等参数的表单时，验证就会启动。我想如果您以这种方式处理它，您将需要包含一些 JS/jQuery 验证器

标签： javascript jquery html validation

【解决方案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-

【讨论】：

不是我的 Q，但这很酷。不知道checkValidity()。每天都是上学日:)
谢谢！作为一个普通的 JS 函数，你可以在没有 jQuery 的情况下使用它，也可以在表单之上使用它

【解决方案2】：

试试这个：

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

  $("form").submit(function(e){
     e.preventDefault();
  });
});

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

<input type="submit" id="insert" value="Tilføj"></span>

【讨论】：