HTML Input Number, Min Validation Error

- 1 answer

right now I have this issue with an input type number in which I have it set up to min 1 when the page is loaded. And when there is a change on an element, I change the min number to 3. Up to here no problem. If I submit the form, it goes through when its over three no problem. But if I change the number to 2 for example and click on the submit button, it does validates the input and tells the user the number must be over 3 to work. Problem is if I change it back to 3, the validation gets stuck and keeps saying that the number on the input is still under 3 for some reason. Here is a page where you can test this out:

If you hit the switch button to on it tells you the number has to be over three. But if you change the quantity input (the one above) to 2 and submit then change it back to 3 the validation will come up again saying it has to be over 3, when it already is. Any ideas what might be happening here? Im tryed this on Chrome, Firefox and Safari. its the same on all browsers. FYI Im using the form helper.

Here is the code from the input:

<li class="attribute">
<div class="value">
    <span class="label color quantity">Cantidad : </span>
<!-- Quantity and add to cart button -->
<input type="number" class="form-control bfh-number" data-min="1" name="quantity" value="1" size="4" min="1" oninvalid="setCustomValidity('Solo cantidades iguales o mayores a 3')">

Here I set on load the min to 1. but I change the min when they click the gray switch besides "Club Mamá VIP:" label. Here is the code that changes the min on the input:

$('#recurrin_checkbox').change(function() {
  if($(this).is(":checked")) {
    $("#frequency_number, #frequency_type").prop('disabled', function (_, val) { return ! val; });
    //Here I change the data-min for the input number and form helper to "work"
    $('input[name=quantity]').attr('data-min', '3');
    //Here I change the min to 3 for the input number
    $('input[name=quantity]').attr('min', '3');
    //I change the value to 3
      type: "warning",   
      title: "¡Cantidad Minima!",   
      text: "Mínimo de compra: 3 paquetes de pañales/formulas para suscribirte al Club Mama VIP.",   
      timer: 3000,   
      showConfirmButton: true 
  } else {
    $("#frequency_type, #frequency_number").prop('disabled', function (_, val) { return ! val; });
    //When its changed back to off, I change the data back.
    $('input[name=quantity]').attr('data-min', '1');
    $('input[name=quantity]').attr('min', '1');
    $('input[name=quantity]').attr('value', '1');

Even if I change it back to off, which should change the min back to one. The validation tells me the number should be over 3 D: I'm really confused.



One of the shortcomings of setCustomValidity is it's implementation is not very bit straightforward.

  1. You have to use setCustomValidity with onchange (or similar events) for it to work properly. More details of it here - Constraint Validation
  2. If setCustomValidity is required by the developer to be fired on submit, it has to be cleared everytime submit is clicked, check for validation and reset.

Since from your comments I understand that you need to set a custom validation message. In that case try the following code:


<input id="quantity" type="number" class="form-control bfh-number" data-min="1" name="quantity" value="1" size="4" min="1">
<button id="<some_id>"..... /> <!-- Button should not be type submit --!>


    var inpObj = document.getElementById("quantity");

    if (inpObj.checkValidity() == false) {
        inpObj.setCustomValidity('Solo cantidades iguales o mayores a 3');
    } else {
        // form submit