jQuery只在表单在浏览器中有效时触发

Question

我试图得到一个jQuery事件，只有触发一旦表单是有效的-不使用任何扩展。例如，我有一个电子邮件字段:

<input type="email" class="form-control" id="email" placeholder="[e-mail]" aria-describedby="emailHelp"  name="email" maxlength="250" required>

在窗体内部。一旦提交按钮被点击，这个事件将被触发:

$("#submitForm").click(function() {
$("#spinnerSubmit").removeAttr('hidden');
});

但是，如果用户没有以正确的格式输入正确的电子邮件，则会触发事件，但Form仍然等待电子邮件输入。我可以以某种方式检查表单是否经过浏览器端验证，而不使用任何过度扩展?还是我唯一的选择是这个?

Answer 1

大多数现有答案，特别是标记为jquery的答案将指向jquery验证。

HTML5包含一些表单验证，参见:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process

总而言之，您可以在DOM元素或表单上调用checkValidity，例如:

document.getElementById("myForm").checkValidity();

这里有一个例子(jquery只用于事件/UI):

$("#submitForm").click(function() {
var isValid = document.getElementById("myForm").checkValidity();

$("p").text(isValid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input type="email" class="form-control" id="email" placeholder="[e-mail]" aria-describedby="emailHelp" name="email" maxlength="250" required>
</form>
<button type='button' id='submitForm'>click me</button>
<p>waiting for click</p>

你也可以使用$("#myForm")[0].checkValidity()，但把它留在例子中，以避免混淆jquery/DOM和[0]或使用香草的UI更新。