HTML 表单验证 - 在继续之前检查 'required' 属性

Question

我有一个带有必填文本字段的 html 表单，类似这样 -

<form>
  <input type="text" class="text_input" required>
  <input type="text" class="text_input" required>
  <div id="submit_div">
      <input type="submit id="submit">
  </div>
</form>

为了防止意外的重复提交（比如有人点了两次提交，要么是不小心，要么是不耐烦），我添加了下面的脚本，隐藏了原来的提交按钮，并用一个基本相同的元素代替外观但没有功能

$("#submit")click(function() {
    $("#submit").hide();
    $("#submit_div").append('<div id="submitting" class="buttonText animated flash">Submitting...</br><div class="againStop" id="stop">Please wait</div></div>');
});

我遇到的问题是，在填写必填字段之前单击提交按钮会触发此脚本，从页面中删除该按钮并阻止用户在填写必填字段后提交表单场.

我需要的是告诉函数中的 hide 和 append 方法仅在所有必填字段都已填写时才触发。我如何访问所有必填字段的必填属性并在继续之前检查它们是否返回 true 以便仅在填写所有必填字段时触发这些方法？

Answer 1

为表单的 onsubmit 事件添加事件侦听器，如果检查失败则添加 return: false。

Answer 2

在提交表单之前使用 JavaScript 验证您的表单字段，并在有空白字段或任何不正确信息时提醒用户。在此处 http://www.web-tutor99.com/complete-form-validation-using-javascript.html

查找使用 javascript 进行表单验证的教程

HTML 表单验证 - 在继续之前检查 'required' 属性

HTML form validation - check 'required' attribute before proceeding

html

forms

validation

required