Question

在我的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">

Answer 1

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

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

https://jsfiddle.net/4o8nnkjy/

因此，在上面的示例中，仅当表单有效时才会发出警报。

Answer 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
 }

通过AJAX提交表单，但保持客户端验证

2 个答案: