Javascript/JQuery - 自定义表单验证脚本在每次提交时错误地抛出验证错误

Question

我在 JS/JQuery 中为我的项目制作了一个表单验证脚本，但是当我想第二次提交填写好的表单时（当我第二次点击提交按钮时）我遇到了问题，而且每偶数次（单击提交第 4 次、第 6 次、第 8 次...）。当我点击第 1 次、第 3 次、第 5 次...时，它正常验证并且没有错误。

我尝试更改错误变量（使用 true/false、1/0、"yes"/"no"）、if/else 语句，但似乎没有任何效果。每次我得到相同的结果。

$(document).ready(function() {

    var newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/g;

    $("#js-new-hieroglyph-code-form").submit(function(e){
        e.preventDefault();

        var inputNewHieroglyphCodeValue = $("#js-new-hieroglyph-code-input").val().trim();
        console.log(inputNewHieroglyphCodeValue);
        var newHieroglyphCodeInputNumberError;
        var newHieroglyphCodeInputFormatError;
        var newHieroglyphCodeInputError;

        if (inputNewHieroglyphCodeValue.length >= 3) {
            newHieroglyphCodeInputNumberError = "no";
        } else {
            newHieroglyphCodeInputNumberError = "yes";
        }

        if (newHieroglyphCodeRegex.test(inputNewHieroglyphCodeValue) === true) {
            var newHieroglyphCodeInputFormatError = "no";
        } else {
            var newHieroglyphCodeInputFormatError = "yes";
        }

        if (newHieroglyphCodeInputNumberError == "no" && newHieroglyphCodeInputFormatError == "no") {
            newHieroglyphCodeInputError = "no";
        } else {
            newHieroglyphCodeInputError = "yes";
        }

        if (newHieroglyphCodeInputError == "yes") {
            if (newHieroglyphCodeInputNumberError == "yes") {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code must have at least 3 characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            } else {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code has invalid formatting or characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            }  
        } else {
            var errorMessage = "<div class='success-message'><p>Looking good!</p></div>";
            $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            $("#js-new-hieroglyph-code-input-error-div").css("display", "none");
            $("#js-new-hieroglyph-code-input").css("border-color", "rgb(95,160,95)");
            $.ajax({
                url : "./includes/individual_insert_scripts/insert_new_hieroglyph_code.script.php",
                method : "POST",
                data : {
                    inputNewHieroglyphCodeValue : inputNewHieroglyphCodeValue,
                    submit : 1
                },
                success : function(data) {
                    $("#js-new-hieroglyph-code-success-message-wrapper").html(data);
                }
            });
        }
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="js-new-hieroglyph-code-form" class="form-content-holder" method="POST" action="" autocomplete="off" novalidate accept-charset="UTF-8">
   <!-- NEW HIEROGLYPH CODE -->
   <div class="form-section">
      <div class="basic-form-element-container-narrow">
         <!-- Label for form field -->
         <label for="js-new-hieroglyph-code-input">New hieroglyph code</label>
         <div class="form-input-info-wrapper">
            <div class="form-input-wrapper">
               <!-- Form input field -->
               <input id="js-new-hieroglyph-code-input" name="new-hieroglyph-code-input" type="text">
               <!-- DIV for error message -->   
               <div id="js-new-hieroglyph-code-input-error-div" class="validation-message-div">
                  <!-- Wrong formatting. -->
                  <!-- Code already exists. -->
                  <!-- Looking good! -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- SUCCESS MESSAGE -->
   <div id="js-new-hieroglyph-code-success-message-wrapper" class="insert-success-message-wrapper">
      <!-- You successfully added new hieroglyph code. Proceed to this <a href="./new_hieroglyph.php">page</a> to add new hieroglyph to the database. -->
   </div>
   <!-- SUBMIT BUTTON -->
   <div class="form-submit-button-wrapper">
      <button id="js-new-hieroglyph-code-submit-button" name="new-hieroglyph-code-submit-button" class="default-button" type="submit">Submit!</button>
   </div>
</form>

错误如下：

Answer 1

这里的问题是你在函数外定义了 regex 模式并带有全局标志，这意味着每隔一次尝试它都会尝试在先前找到的匹配项的索引之后找到匹配项。你可以阅读它 here.

var newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/g;
var inputValue = "Ag5";
console.log("Global flag: " + newHieroglyphCodeRegex.test(inputValue));
console.log("Global flag: " + newHieroglyphCodeRegex.test(inputValue));

newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/;
console.log("No global flag: " + newHieroglyphCodeRegex.test(inputValue));
console.log("No global flag: " + newHieroglyphCodeRegex.test(inputValue));

简单的解决方案是将变量定义移动到提交函数中或删除 g 标志。此外，我建议使用更简单的变量名称并将 yes/no 值更改回 true/false 以获得更清晰的代码。

$(document).ready(function() {

    $("#js-new-hieroglyph-code-form").submit(function(e) {
        e.preventDefault();
        var newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/g;
        
        var inputValue = $("#js-new-hieroglyph-code-input").val().trim();
        var numberError;
        var formatError;
        var error;

        if (inputValue.length >= 3) {
            numberError = "no";
        } else {
            numberError = "yes";
        }
        var regexResult = newHieroglyphCodeRegex.test(inputValue);
        console.log(regexResult);
        if (regexResult) {
            formatError = "no";
        } else {
            formatError = "yes";
        }

        if (numberError == "no" && formatError == "no") {
            error = "no";
        } else {
            error = "yes";
        }

        if (error == "yes") {
            if (numberError == "yes") {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code must have at least 3 characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            } else {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code has invalid formatting or characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            }
        } else {
            var errorMessage = "<div class='success-message'><p>Looking good!</p></div>";
            $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            $("#js-new-hieroglyph-code-input-error-div").css("display", "none");
            $("#js-new-hieroglyph-code-input").css("border-color", "rgb(95,160,95)");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="js-new-hieroglyph-code-form" class="form-content-holder" method="POST" action="" autocomplete="off" novalidate accept-charset="UTF-8">
   <!-- NEW HIEROGLYPH CODE -->
   <div class="form-section">
      <div class="basic-form-element-container-narrow">
         <!-- Label for form field -->
         <label for="js-new-hieroglyph-code-input">New hieroglyph code</label>
         <div class="form-input-info-wrapper">
            <div class="form-input-wrapper">
               <!-- Form input field -->
               <input id="js-new-hieroglyph-code-input" name="new-hieroglyph-code-input" type="text">
               <!-- DIV for error message -->   
               <div id="js-new-hieroglyph-code-input-error-div" class="validation-message-div">
                  <!-- Wrong formatting. -->
                  <!-- Code already exists. -->
                  <!-- Looking good! -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- SUCCESS MESSAGE -->
   <div id="js-new-hieroglyph-code-success-message-wrapper" class="insert-success-message-wrapper">
      <!-- You successfully added new hieroglyph code. Proceed to this <a href="./new_hieroglyph.php">page</a> to add new hieroglyph to the database. -->
   </div>
   <!-- SUBMIT BUTTON -->
   <div class="form-submit-button-wrapper">
      <button id="js-new-hieroglyph-code-submit-button" name="new-hieroglyph-code-submit-button" class="default-button" type="submit">Submit!</button>
   </div>
</form>

Javascript/JQuery - 自定义表单验证脚本在每次提交时错误地抛出验证错误

Javascript/JQuery - Custom form validation script throwing validate error erroneously on every second submit

javascript

forms

validation

submit