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验证表单字段，并在存在空字段或任何不正确信息时提醒用户。在此处使用javascript http://www.web-tutor99.com/complete-form-validation-using-javascript.html

查找有关表单验证的教程

HTML表单验证 - 检查＆＃39;必需＆＃39;继续之前的属性

2 个答案: