小贝子编程

如果单个页面中有两个不同的表单 Id，如何处理 html5 验证



我有两种不同的形式，ID newForm和oldForm。但是当我单击提交按钮时，html5验证仅显示在"newForm"的输入字段中。html5 验证没有出现在oldForm中，因为我在 oldForm 的输入文件中保留了必填字段。单击按钮时如何验证这两种不同的表单Submit？我需要两种形式的 html5 valdiation，但验证以 seconnd 形式出现，而不是以第一种形式出现。

$(document).ready(function() {
  $("#saveBtn").on("click", function() {
    console.log("form submitted");
    /*$.ajax({
      // ajax code to submit
    }); */
  });
});
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container" style="padding-bottom: 20px;">
    <h2>Pre Assessment</h2>
    <div class="card">
      <div class="card-body">
        <div class="col-md-12" style="float: none;">
          <form id="oldForm">
            <div class="row">
              <div class="form-group col-md-6 assess">
                <div class="col-md-12">
                  <font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
                  </font>
                  <select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
                    <option value="" selected disabled hidden>Choose here</option>
                    <option value="appeal">Appeal</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
              <div class="form-group col-md-6">
                <div class="row">
                  <div class="col-md-12 pnbp" style="margin-bottom: 10px;">
                    <font face="preeti" size="5">
                      k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
                    <input type="text" class="form-control" id="appealId" name="appealId" required />
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 orIf" style="margin-bottom: 10px;">
                    <font face="preeti" size="5">cGo</font>
                    <input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
                  </div>
                </div>
              </div>
            </div>
            <!-- for other two field -->
            <div class="row">
              <div class="form-group col-md-3">
                <div class="col-md-12" style="margin-bottom: 10px;">
                  (B.S.)
                  <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
                </div>
              </div>
              <div class="form-group col-md-3">
                <div class="col-md-12" style="margin-bottom: 10px;">
                  <font face="preeti" size="5">
                  </font>(A.D.)
                  <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
                </div>
              </div>
              <div class="form-group col-md-3">
                <div style="margin-bottom: 40px;">
                  (B.S)
                  <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
                </div>
              </div>
              <div class="form-group col-md-3">
                <div style="margin-bottom: 40px;">
                  (A.D)
                  <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
                </div>
              </div>
            </div>
          </form>
          <form id="newForm">
            <div id="formContainer" class="col-md-12" style="float: none;">
              <div style="margin-bottom: 30px;">
                <div class="form-group row">
                  <div class="col-md-1"></div>
                  <div class="col-md-4">
                    <label>Reason</label>
                  </div>
                  <div class="col-md-2">
                    <label>Amount</label>
                  </div>
                  <div class="col-md-2">
                    <label>Penalty</label>
                  </div>
                  <div class="col-md-1">Total</div>
                  <div class="col-md-2">Action</div>
                </div>
                <div class="customs-table row">
                  <div class="col-md-1">
                    <label>Customs</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control customReason" required />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div class="vat-table row">
                  <div class="col-md-1">
                    <label>VAT</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control vatReason" name="vatReason" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div class="excise-table row">
                  <div class="col-md-1">
                    <label>Excise</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control exciseReason" name="exciseReason" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div id="a"></div>
                <div class="col-md-12 pull-right">
                  <label>Total:</label>&nbsp;<b><span id="tot">0</span></b>
                </div>
              </div>
              <button id="saveBtn" class="btn btn-success pull-right">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

由于您使用的是 HTML5 验证，请使用 HTML5 DOM 方法：

$(document).ready(function() {
  // Add the e (event) argument to your event handler...
  $("#saveBtn").on("click", function(e) {
    // and call preventDefault() on it to prevent submission of the form.
    e.preventDefault();
    let allValid = true;
    $("form").each(function (index, form) {
      allValid = allValid && form.reportValidity();
    });
    if (allValid) {
      /*$.ajax({
        // ajax code to submit
      }); */
    }
  });
});
form { border: 1px solid blue; }
input:invalid { border: 1px solid red; }
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container" style="padding-bottom: 20px;">
    <h2>Pre Assessment</h2>
    <div class="card">
      <div class="card-body">
        <div class="col-md-12" style="float: none;">
          <form id="oldForm">
            <div class="row">
              <div class="form-group col-md-6 assess">
                <div class="col-md-12">
                  <font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
                  </font>
                  <select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
                    <option value="" selected disabled hidden>Choose here</option>
                    <option value="appeal">Appeal</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
              <div class="form-group col-md-6">
                <div class="row">
                  <div class="col-md-12 pnbp" style="margin-bottom: 10px;">
                    <font face="preeti" size="5">
                      k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
                    <input type="text" class="form-control" id="appealId" name="appealId" required />
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 orIf" style="margin-bottom: 10px;">
                    <font face="preeti" size="5">cGo</font>
                    <input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
                  </div>
                </div>
              </div>
            </div>
            <!-- for other two field -->
            <div class="row">
              <div class="form-group col-md-3">
                <div class="col-md-12" style="margin-bottom: 10px;">
                  (B.S.)
                  <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
                </div>
              </div>
              <div class="form-group col-md-3">
                <div class="col-md-12" style="margin-bottom: 10px;">
                  <font face="preeti" size="5">
                  </font>(A.D.)
                  <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
                </div>
              </div>
              <div class="form-group col-md-3">
                <div style="margin-bottom: 40px;">
                  (B.S)
                  <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
                </div>
              </div>
              <div class="form-group col-md-3">
                <div style="margin-bottom: 40px;">
                  (A.D)
                  <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
                </div>
              </div>
            </div>
          </form>
          <form id="newForm">
            <div id="formContainer" class="col-md-12" style="float: none;">
              <div style="margin-bottom: 30px;">
                <div class="form-group row">
                  <div class="col-md-1"></div>
                  <div class="col-md-4">
                    <label>Reason</label>
                  </div>
                  <div class="col-md-2">
                    <label>Amount</label>
                  </div>
                  <div class="col-md-2">
                    <label>Penalty</label>
                  </div>
                  <div class="col-md-1">Total</div>
                  <div class="col-md-2">Action</div>
                </div>
                <div class="customs-table row">
                  <div class="col-md-1">
                    <label>Customs</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control customReason" required />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div class="vat-table row">
                  <div class="col-md-1">
                    <label>VAT</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control vatReason" name="vatReason" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div class="excise-table row">
                  <div class="col-md-1">
                    <label>Excise</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control exciseReason" name="exciseReason" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div id="a"></div>
                <div class="col-md-12 pull-right">
                  <label>Total:</label>&nbsp;<b><span id="tot">0</span></b>
                </div>
              </div>
              <button id="saveBtn" class="btn btn-success pull-right">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

注意事项：

  • 这将在文档顺序中最后一个表单的最后一个无效字段上显示验证消息。
  • 我添加了CSS来突出显示表单边界和无效字段，使其更加明显。
  • font元素已被弃用很长时间。使用 span 和 CSS。
不要使用

HTML5 验证，而是使用 Ajax 创建自己的验证方法，以防止客户端用户操纵。

使用 JavaScript 在 POST 之前验证表单，如下所示： 

<!--Html Form-->
<form name="contact-form" action="" method="post" onsubmit="return checkFields()">
           <label for="nameinput">Name</label>
           <input type="text" name="name">
          <label for="emailinput">Email address</label>
          <input type="email" name="email">
          <label for="textarea-input">Message</label>
          <textarea rows="5" name="message"></textarea>
        <button type="submit" name="contactSubmitBtn">Submit</button>
</form>

function checkFields() {
var x = document.forms["example-form"]["name"].value;
var y = document.forms["example-form"]["email"].value;
var z = document.forms["example-form"]["message"].value;
if (x == "") {
    Response Here
    return false;
}
if (y == "") {
    Response Here
    return false;
}
if (z == "") {
  Response Here!
  return false;
}

}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium