Question

我有一个带有一些html属性的表单，如：

<form>
      <label>Full  Name</label>

      <input type="text" name="firstname" class="span3" required="required">
      <label>Email Address</label>
      <input type="email" name="email" class="span3" required="required">
      <label>Username</label>
      <input type="text" name="username" class="span3" required="required">
      <label>Password</label>

当用户点击按钮时，我希望html5应用验证规则。

如果验证规则没问题，那么请不要提交表单，但要使用一些$ _POST ajax

有什么想法吗？

Answer 1

checkValidity()将使用原生HTML5验证来验证表单：

$('form').on('submit', function(e) { // or on button click ?
    e.preventDefault()

    var valid = e.target.checkValidity();

    if (valid) {
        // do ajax
    }
});

来自MDN：

在HTMLFormElement对象上，返回checkValidity（）方法如果所有这些表单元素的关联元素都是true，则为true 受约束验证满足其约束，并且为false 如果有的话。

请注意，并非所有浏览器都支持它。

Answer 2

像这样的东西

$('form').on('submit', function(e) {
 if (e.target.checkValidity() === false)
 {
   e.preventDefault(); // disable the "normal" action of submit
 }
});

如何验证HTML5表单而不发布表单？

2 个答案: