通过 AJAX 提交表单但保留客户端验证答案

【问题标题】：Submit form via AJAX but keep client side validation通过 AJAX 提交表单但保留客户端验证
【发布时间】：2016-07-18 02:14:04
【问题描述】：

在我的 HTML 代码中，我有必填字段和使用 HTML5 属性的正则表达式模式检查。我想通过 AJAX 将我的数据提交到我的服务器，但我必须使用 e.preventDefault();

使用它，禁用所有 HTML5 属性，如“required”和“type=email”以及内置的 HTML5 客户端检查。基本上用户可以只提交一个空表单。

有没有办法让 HTML5 先检查我指定的属性是否满足，然后 e.preventDefault 提交，以便我可以通过 AJAX 手动提交？

$("input[type='submit']#input_submit").click(
  function(e) {
    //Prevents form from submitting right away:
    e.preventDefault();

    // Allows or keeps halting form submission process; returns true or false.
    validationForm();
});

function validationForm() {

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="lastname">
<p>Last Name</p>
<input type="text" name="lastname" placeholder="Last Name" pattern="[a-zA-Z]+" title="Letters Only" required></input>
</section>
<input id="input_submit"  type="submit" value="submit">

【问题讨论】：

请从您的 html5 添加代码以了解您的结构。
姓

标签： javascript jquery ajax node.js forms

【解决方案1】：

如果您改为阻止表单提交（而不是单击按钮），您将获得所需的行为。

$("form#your_form").on("submit", function(e) {
    e.preventDefault();
    alert();
});

https://jsfiddle.net/4o8nnkjy/

所以在上面的例子中，只有在表单有效时才会发出警报。

【讨论】：

对我来说看起来很完美

【解决方案2】：

您可以改为更改按钮的提交。

<input id="button" type="button">

然后，当用户点击按钮时

$('#button').click(function(){validationForm(input1, input2, etc);});

那么，validationForm函数有什么用呢？所有你想做的验证。

function validationForm(input1, input2, input3){
    //Make all your validations
    //Then, if all is correct, send the data via AJAX
 }

【讨论】：