表单未提交，不确定这是否与验证码有关

Question

我正在尝试将代码绑定在一起。 我最近刚刚制作了一个表格，并在 codepen 上找到了一个我想尝试的验证码，但由于某种原因，即使它确实执行了计算，我也无法让验证码验证表格。 知道什么可能导致我的代码出现问题吗？ 提前致谢。

  <form 
                                        class="form mt-4" 
                                        method="POST" 
                                        action="action_page.php">
                                        <!-- Name Field -->
                                        <div class="form-group">
                                            <label for="name">Name:</label>
                                            <input
                                                type="text"
                                                name="name"
                                                id="name"
                                                placeholder="Enter Your Name"
                                                class="form-control"
                                                required
                                            />
                                        </div>

                                        <!-- Email Field -->
                                        <div class="form-group">
                                            <label for="email"
                                                >Email Address:</label
                                            >
                                            <input
                                                type="email"
                                                name="email"
                                                id="email"
                                                placeholder="Enter Your Email"
                                                class="form-control"
                                                required
                                            />
                                        </div>

                                        <!-- Password Field -->
                                        <div class="form-group">
                                            <label for="password"
                                                >Password:</label
                                            >
                                            <input
                                                type="password"
                                                name="password"
                                                minlength="8"
                                                id="password"
                                                placeholder="Password"
                                                class="form-control"
                                                required
                                            />
                                        </div>

                                        <!-- Confirm Password Field -->
                                        <div class="form-group">
                                            <label for="confirm_password"
                                                >Confirm Password:</label
                                            >
                                            <input
                                                type="password"
                                                name="confirm_password"
                                                minlength="8"
                                                id="confirm_password"
                                                placeholder="Confirm Password"
                                                class="form-control"
                                                required
                                            />
                                        </div>

                                        <!-- Telegram API Token Field -->
                                        <div class="form-group">
                                            <label for="telegram_token"
                                                >Telegram API Token:</label
                                            >
                                            <input
                                                type="text"
                                                name="telegram_token"
                                                id="telegram_token"
                                                placeholder="Enter Telegram API Token"
                                                class="form-control"
                                                required
                                            />
                                        </div>

                                        <!-- Telegram Chat ID Field -->
                                        <div class="form-group">
                                            <label for="telegram_id"
                                                >Telegram Chat ID:</label
                                            >
                                            <input
                                                type="text"
                                                name="telegram_id"
                                                id="telegram_id"
                                                placeholder="Enter Telegram Chat ID"
                                                class="form-control"
                                                required
                                            />
                                        </div>

                                        <!-- Captcha Field -->
                                        <div class="form-group">
                                            <label>Are you human?</label>
                                            <br />

                                            <label class="submit__control">
                                                <div
                                                    class="submit__generated"
                                                ></div>
                                                <i
                                                    class="fa fa-refresh"
                                                ></i>
                                                <span
                                                    class="submit__error hide"
                                                    >Incorrect value</span
                                                >
                                                <span
                                                    class="submit__error--empty hide"
                                                    >Required field cannot
                                                    be left blank</span
                                                >
                                            </label>
                                        </div>

                                        <!-- Register Button -->
                                        <div class="form-group">
                                            <button
                                                type="submit"
                                                class="btn btn-info btn-block"
                                            >
                                                Register
                                            </button>

var a,
b,
c,
submitContent,
captcha,
locked,
validSubmit = false,
timeoutHandle;

 // Generating a simple sum (a + b) to make with a result (c)
 function generateCaptcha() {
a = Math.ceil(Math.random() * 10);
b = Math.ceil(Math.random() * 10);
c = a + b;
submitContent =
    "<span>" +
    a +
    "</span> + <span>" +
    b +
    "</span>" +
    ' = <input class="submit__input" type="text" maxlength="2" size="2" required />';
$(".submit__generated").html(submitContent);

init();
}

// Check the value 'c' and the input value.
function checkCaptcha() {
if (captcha === c) {
    // Pop the green valid icon
    $(".submit__generated").removeClass("unvalid").addClass("valid");
    $(".submit").removeClass("overlay");
    $(".submit__overlay").fadeOut("fast");

    $(".submit__error").addClass("hide");
    $(".submit__error--empty").addClass("hide");
    validSubmit = true;
   } else {
    if (captcha === "") {
        $(".submit__error").addClass("hide");
        $(".submit__error--empty").removeClass("hide");
    } else {
        $(".submit__error").removeClass("hide");
        $(".submit__error--empty").addClass("hide");
    }
    // Pop the red unvalid icon
    $(".submit__generated").removeClass("valid").addClass("unvalid");
    $(".submit").addClass("overlay");
    $(".submit__overlay").fadeIn("fast");
    validSubmit = false;
  }
  return validSubmit;
  }

  function unlock() {
    locked = false;
  }

// Refresh button click - Reset the captcha
$(".submit__control i.fa-refresh").on("click", function () {
if (!locked) {
    locked = true;
    setTimeout(unlock, 500);
    generateCaptcha();
    setTimeout(checkCaptcha, 0);
  }
});

// init the action handlers - mostly useful when 'c' is refreshed
 function init() {
  $("form").on("submit", function (e) {
    e.preventDefault();
    if ($(".submit__generated").hasClass("valid")) {
        // var formValues = [];
        captcha = $(".submit__input").val();
        if (captcha !== "") {
            captcha = Number(captcha);
        }

        checkCaptcha();

        if (validSubmit === true) {
            validSubmit = false;
            // Temporary direct 'success' simulation
            submitted();
        }
    } else {
        return false;
    }
  });

  // Captcha input result handler
  $(".submit__input").on(
    "propertychange change keyup input paste",
    function () {
        // Prevent the execution on the first number of the string if it's a 'multiple number string'
        // (i.e: execution on the '1' of '12')
        window.clearTimeout(timeoutHandle);
        timeoutHandle = window.setTimeout(function () {
            captcha = $(".submit__input").val();
            if (captcha !== "") {
                captcha = Number(captcha);
            }
            checkCaptcha();
        }, 150);
    }
   );

   // Add the ':active' state CSS when 'enter' is pressed
   $("body")
    .on("keydown", function (e) {
        if (e.which === 13) {
            if ($(".submit-form").hasClass("overlay")) {
                checkCaptcha();
            } else {
                $(".submit-form").addClass("enter-press");
            }
        }
    })
    .on("keyup", function (e) {
        if (e.which === 13) {
            $(".submit-form").removeClass("enter-press");
        }
    });

    // Refresh button click - Reset the captcha
    $(".submit-control i.fa-refresh").on("click", function () {
    if (!locked) {
        locked = true;
        setTimeout(unlock, 500);
        generateCaptcha();
        setTimeout(checkCaptcha, 0);
    }
  });

  // Submit white overlay click
  $(".submit-form-overlay").on("click", function () {
    checkCaptcha();
   });
}

  generateCaptcha();


  // Password Match Function

  function check(input) {
  if (input.value != document.getElementById('password').value) {
    input.setCustomValidity('Passwords do not match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}

Answer 1

缺少提交的 function