CHANGE event block SUBMIT event when I show/hide some HTML from form-CodePudding

I have a problem. I am attaching a codepen with the code for a sample.

If I enter a value smaller than 50 into the input and immediately click the send button, the CHANGE event is called, an error message is displayed and the value in the input is overwritten to the smallest possible value, but the SUBMIT event does not occur. If I again enter a value lower than 50, both the CHANGE event and the SUBMIT event will now be triggered.

If I now give a value that is within the allowed range of 50 - 150, the error message will disappear and only the CHANGE event will occur again. If I give a number from the allowed range again, the CHANGE event and SUBMIT event are called.

And I just need to solve so that the submit event is always called.

const $form = $(".test-form");
const max = 150;
const min = 50;

$form
  .on("change", "input", function () {
    console.log("change");

    const setVal = $(this).val();

    if (setVal < min) {
      $(this).val(min);
      $(".error-min").show();
    }
    if (setVal > max) {
      $(this).val(max);
      $(".error-max").show();
    }
    if (setVal >= min) {
      $(".error-min").hide();
    }
    if (setVal <= max) {
      $(".error-max").hide();
    }
  })
  .on("submit", function (e) {
    e.preventDefault();
    console.log("submit");
  });

input {
  display: block;
  margin-bottom: 20px;
}

.error {
  color: red;
  margin-bottom: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<form >
  <input type="number" value="100">
  <p >under min val (50)</p>
  <p >under max val (150)</p>
  <button>SUBMIT</button>
</form>

https://codepen.io/dominiklev/pen/rNvOGPY

CodePudding user response：

The problem is because the button moves. Taking the events in turn, the change event happens first, shows the red validation message and the button shifts down. The user clicking the mouse then misses the button, so no click event is raised.

A quick fix to avoid this happening would be to change the p elements in to an inline element so that they appear alongside the input elements, a span for example:

const $form = $(".test-form");
const max = 150;
const min = 50;

$form.on("change", "input", function() {
  const setVal = $(this).val();
  console.log('change');

  if (setVal < min) {
    $(this).val(min);
    $(".error-min").show();
  }
  if (setVal > max) {
    $(this).val(max);
    $(".error-max").show();
  }
  if (setVal >= min) {
    $(".error-min").hide();
  }
  if (setVal <= max) {
    $(".error-max").hide();
  }
}).on("submit", function(e) {
  e.preventDefault();
  console.log("submit");
});

input {
  display: inline-block;
  margin-bottom: 20px;
}

button {
  display: block;
}

.error {
  color: red;
  margin-bottom: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<form >
  <input type="number" value="100">
  <span >under min val (50)</span>
  <span >under max val (150)</span>
  <button>SUBMIT</button>
</form>