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

Question

I made a form validation script in JS/JQuery for my project, but I have an issue when I want to submit the filled form for a second time (when I click Submit button second time), but also every even time (click Submit 4th, 6th, 8th time...). When I click 1st, 3rd, 5th... time, it normally validates and without error.

I tried to change error variables (using true/false, 1/0, "yes"/"no"), if/else statements, but nothing seems to work. Every time I get the same results.

$(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>

Here are the errors:

Cray · Accepted Answer · 2019-07-17T07:46:03.680

The problem here is that you define regex pattern outside the function with a global flag, which means every other try it will try to find a match after the index of previously found match. You can read about it 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));

Simple solution is to move the variable definition inside the submit function or remove the g flag. Also I suggest using simpler variable names and change yes/no values back to true/false for cleaner code.

$(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>

Your explanation and description of the problem solve everything and I learned something new about Regex. Thank you very much. — Boris J., Jul 17 '19 at 21:03

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

1 Answers1