如果陈述属实，请提交表格

Question

我正在尝试编写一个非常简单的 jQuery 函数，它将具有两个主要属性。第一个是检查字段是否为空。第二个将是如果该字段不为空以执行将导致 PHP 编码页面的表单。我是 jQuery 的新手，如果有人能指出我的错误所在，我将不胜感激。提前谢谢你。

function Captcha() {
  $('#Button').click(function() {
    if ($("#Field").val().length == 0) {
      alert("Please fill the box");
      return false;
    } else {
      alert("Your code is saved");
      return true;
    }
  });
}

$(document).ready(function() {
  Captcha();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
  <input id="Field" type="text" placeholder="Enter key here">
  <button id="Button" type="submit" form="Alpha">Confirm</button>
</form>

Answer 1

您可能希望在实际提交表单时验证表单域。当您单击按钮时，您仍在触发提交的过程中。

尝试改变这个：

$('#Button').click(function() {

进入这个：

$('#Alpha').on('submit', function() {

看看是否有帮助。

Answer 2

不要使用按钮的 click 事件，使用表单的 submit 事件，因为表单可以通过键盘提交，因此可以绕过按钮。

您可以看到一个工作版本 here（Stack Overflow 阻止提交代码在下面的代码段环境中工作。）

$(function() {
  $('#Alpha').on("submit", function() {
    if ($("#Field").val().length == 0) {
      alert("Please fill the box");
      return false;
    } else {
      alert("Your code is saved");
      return true;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
  <input id="Field" type="text" placeholder="Enter key here">
  <button id="Button" type="submit" form="Alpha">Confirm</button>
</form>

如果陈述属实，请提交表格

Submit a form if the statement is true

javascript

php

forms

jquery

form-submit