HTML Input Number, min validation error

Question

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:

http://www.bebe2go.com/collections/panales/products/huggies-supreme-p-n-rn-paq-24

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>
</div>
<!-- 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")) {
    $('.mixed_radio_btn').click();
    $("#frequency_number, #frequency_type").prop('disabled', function (_, val) { return ! val; });
    $('.dealoption-yes').css('opacity','1'); 
    //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
    $('input[name=quantity]').val('3');
    swal({ 
      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 {
    $('.one_time_radio_btn').click();
    $("#frequency_type, #frequency_number").prop('disabled', function (_, val) { return ! val; });
    $('.dealoption-yes').css('opacity','0.3');
    //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.

I don't know the exact solution, but I know the culprit. - the button id='add-to-cart' . As long as I don't click the button, validation holds true as expected with the VIP check on/off scenarios. Try removing oninvalid="setCustomValidity('Solo cantidades iguales o mayores a 3')" and see how it works. — HymnZzy
– HymnZzy, Commented Jan 22, 2016 at 8:23
Wow I would have never thought about that! :D That was the solution! :O Hehehe I have two questions. One how did you check the validation variable? and do you know any other way to set the custom validity message? Cause I need to change it to spanish hehe :P Also at the end please add the answer under so I can mark it as so :P Thanks for the help :D — Jurgen Feuchter
– Jurgen Feuchter, Commented Jan 22, 2016 at 17:47
Refer to this link: w3schools.com/js/tryit.asp?filename=tryjs_validation_check — HymnZzy
– HymnZzy, Commented Jan 23, 2016 at 5:36

HymnZzy · Accepted Answer · 2016-01-23 05:52:55Z

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

You have to use setCustomValidity with onchange (or similar events) for it to work properly. More details of it here - Constraint Validation
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:

HTML

<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 --!>

JAVASCRIPT

$('#<some_id>').on("click",function(){
    var inpObj = document.getElementById("quantity");
    inpObj.setCustomValidity('');

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

Collectives™ on Stack Overflow

HTML Input Number, min validation error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related