HTML5 Validation and jQuery POST

Question

我有一个表单，我在我的表单控件中使用html5验证，如required="required"，并试图使用jQuery .post函数提交它。我是这样做的:

$(document).on('click', '.save-and-new', function (event) {
  event.preventDefault();
  var url = '/Weight/Manage';
  var data = $('#manageWeight-form').serialize();
  var jqxhr = $.post(url, data, function (d) {
     alert("success");
  });
});

问题是，当我这样做html5验证不触发。我假设这是因为preventDefault()函数，但我需要它，因为我想要的形式，这是顺便在一个模态，留在同一页上。我如何使用html5验证并使用jquery post提交表单?

Answer 1

你可以使用表单提交方法来进行HTML-5验证，而不是点击提交按钮

$('#manageWeight-form').submit(function (e) {
  e.preventDefault();
  var url = '/Weight/Manage';
  var data = $('#manageWeight-form').serialize();
  var jqxhr = $.post(url, data, function (d) {
     alert("success");
  });
  return false;
});

看到

$('#manageWeight-form').submit(function (e,btn_id) {
  
  e.preventDefault();
  alert($(this).data('submitted-by'));
  var url = '/Weight/Manage';
  var data = $('#manageWeight-form').serialize();
  var jqxhr = $.post(url, data, function (d) {
     alert("success");
  });
  return false;
});
$('#manageWeight-form input[type="submit"]').click(function(e){
  
  $('#manageWeight-form').data('submitted-by',$(this).attr('id'));
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="manageWeight-form">
  <input name="aaa" required />
  <input name="bbb" required />
  <input type="submit" name="Submit 1" id="AAA"/>
  <input type="submit" name="Submit 2" id="BBBB"/>
 </form>