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

Dominik Lev 0
Viewed 43

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 class="test-form">
  <input type="number" value="100">
  <p class="error error-min">under min val (50)</p>
  <p class="error error-max">under max val (150)</p>
  <button>SUBMIT</button>
</form>

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

event-handling addeventlistener jquery events javascript
1 Answers

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 class="test-form">
  <input type="number" value="100">
  <span class="error error-min">under min val (50)</span>
  <span class="error error-max">under max val (150)</span>
  <button>SUBMIT</button>
</form>

Rory McCrossan0
Related