preventDefault而不删除html5验证 [英] preventDefault without removing html5 validation

问题描述

我用标准的html验证创建了以下表单.对于这种形式，我想避免在按下提交按钮时刷新页面.为此，我在jquery代码中添加了 preventDefault().通过不刷新页面来进行哪些工作，但是同时也删除了html5验证?我怎样才能同时应用这两种东西?

I've created following form with standard html validation. for this form i want to avoid the refresh of page when i press submit button. Therefor in my jquery code i've added preventDefault(). which work by not refreshing the page, however it also remove the html5 validation? how can i apply both things?

表格

<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 () {

    });


    }
});

推荐答案

尝试一下:

$( 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();
  });
});

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

and change insert button type to submit:

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

这篇关于preventDefault而不删除html5验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！