jQuery 当表单在浏览器中有效时哦，火

Question

我正在尝试让 jQuery 事件仅在表单有效时触发 - 不使用任何扩展。例如我有一个电子邮件字段：

<input type="email" class="form-control" id="email" placeholder="info@example.com" aria-describedby="emailHelp"  name="email" maxlength="250" required>

在表单中。单击提交按钮后，将触发此事件：

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

但是，如果用户没有以正确的格式输入正确的电子邮件，事件就会触发，但表单仍会等待电子邮件输入。我可以在不使用任何过度扩展的情况下以某种方式检查表单是否经过浏览器端验证吗？或者是我唯一的选择 this?

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 仅用于 events/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="info@example.com" 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] 的混淆，或者使用 vanilla 进行 UI 更新。

jQuery 当表单在浏览器中有效时哦，火

jQuery ohny fire when Form is valid in browser

html

javascript

forms

jquery