Form continues to submit despite custom validation logic

I have developed some logic to display relevant errors when the form is submitted, but it continues to allow me to submit the form without displaying the errors. I used a flag to determine whether the form should be submitted, but it seems to be ignored, it’s just not working.

 if (this.formId == "challengeQuestionAuth") {
      return new Promise(function (resolve, reject) {

        debugOut("Question: " + _this.payload.question, "alert");
        let div = document.createElement('div');

        div.innerHTML = `
            <div id="contentWrapper" style="display: block;">
              <div class="page">
              <div class="page-body">
              <div>
                <div class="page-title">Online Banking Security Challenge</div>
                  <div class="main-section">
                    <div class="page-instructions">
                      This action requires you to answer a security question before it can be completed.
                    </div>
                    <form class="form" method="post" name="security_challenge" id="security_challenge">
                      <input type="hidden" />
                      <div class="validation-summary-valid alert alert-error" data-valmsg-summary="true">
                        <span>
                          Please correct the highlighted field(s) below.
                        </span>
                        <ul>
                          <li style="display: none;"></li>
                        </ul>
                      </div>
                      <div class="content-panel">
                        <fieldset>
                          <input name="Text" id="Text" type="hidden" value="What is your best friend's middle name?" />
                          <input name="" id="" type="hidden" value="" />
                          <div class="challenge-question">
                            <label for="challengeResponse">
                              ${_this.payload.question}
                            </label>
                          </div>
                          <div class="challenge-answer">
                          <input aria-required="true" name="challengeResponse" class="control" id="challengeResponse" autofocus="autoFocus" type="password" autocomplete="off">
                          <span class="error"><p id="answer_error"></p></span>
                          <input class="checkbox" id="ShowAnswer" type="checkbox">
                          <label class="label" for="ShowAnswer">Show answer</label>
                          <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Answer"></span>
                          </div>
                          <div class="action-group-bottom">
                            <a id="cancelButton" class="cancel-button contextual-link" href="">Cancel</a>
                            <input name="Action:SecurityQuestion" id="continueButton" class="primary-action orange-button" type="submit" data-clear-alerts="true" value="Submit" />
                          </div>
                        </fieldset>
                      </div>
                    </form>
                  </div>
                <div aria-required="true" name="challengeQuestion" type="text" id="challengeQuestion">${_this.payload.question}</div><br />
                <label class="control-label" for="challengeResponse">Response:</label>
              </div>
            </div>
              </div>
            </div>`;

        uiContainer.appendChild(div);

        document.getElementById("security_challenge").onsubmit = function() {
          const answer = document.forms["security_challenge"]["challengeResponse"].value;

          const submit = true;

          if (answer == null || answer == "") {
            answerError = "Please provide an answer.";
            document.getElementById("answer_error").innerHTML = answerError;
            submit = false;
          }

          return submit;
        }

Here is a minimally reproducible example:

https://codepen.io/ldco2017/pen/dyMMpjb?editors=0010

Answer

I was able to disallow the form to be submitted with what I have below. Adding strict comparison operator to if statement and change const submit to let submit because you are reassigning it.

let submit = true;
if (answer === null || answer === "") {
 answerError = "Please provide an answer.";
 document.getElementById("answer_error").innerHTML = answerError;
 submit = false;
}