Question

我在页面中有两种形式（包括输入，textarea，复选框）。我想在点击单独按钮上单独检查这些表格的空白。我使用以下脚本。但如果这些表单输入中的任何一个为空，则显示空消息。

$('#submit').click(function(e) {
    var empty = false;

    $('input, textarea').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        alert("empty");
        e.preventDefault();
    } 
    else {
        document.getElementById("contact").submit();
    }
})()

Answer 1

永远不要分配提交按钮的内容
如果您选择使用preventDefault，如果出现问题，请不要从提交按钮提交表单。它可以提交表格两次

＆＃13;

$(function() {
  // on the submit event NOT the button click
  $('form').on("submit", function(e) { // any form - use .formClass if necessary to specific forms
    var empty = false; 
    $("input, textarea", this).each(function() { // this form's inputs incl submit
      if ($.trim($(this).val()) == "") { // trim it too
        console.log(this.name,"empty")
        empty = true;
        return false; // no need to continue
      }
    });
    if (empty) {
      alert(this.id + " is empty"); // or set a class on the div
      e.preventDefault(); // cancel submission
    }
  });
});

＆＃13;

div {
  border: 1px solid black;
  width:500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1">
  <div>
    <input type="text" value="" name="field1" /><br/>
    <textarea name="field2"></textarea><br/>
    <input type="submit" value="Submit" />
  </div>
</form>

<hr/>
<form id="form2">
  <div>
    <input type="text" value="" name="field3" /><br/>
    <textarea name="field4"></textarea><br/>
    <input type="submit" value="Submit" />
  </div>
</form>

＆＃13;

您还可以将required添加到字段

Answer 2

你知道你也可以使用jquery来重置表单

form.resetForm();

Answer 3

您需要将处理程序限制为包含单击按钮的表单：

$('#submit').click(function(e) {
    var form = $(this).parents('form:first');
    var empty = false;

    $('input, textarea', form).each(function() {

    // the rest is the same

我还想指出你在多个控件上不能拥有相同的ID，所以

$('#submit')

应该始终返回一个按钮。你应该做这样的事情，用class来区分按钮：

<input type="submit" id="submitA" class="submitButton">
<input type="submit" id="submitB" class="submitButton">

并选择

$('.submitButton')

单独检查页面中的多个表单

3 个答案: