HTML 输入数字，最小验证错误

Question

现在我遇到了输入类型编号的问题，我在加载页面时将其设置为最小 1。当元素发生变化时，我将最小值更改为 3。到这里没问题。如果我提交表格，它会在超过三个时通过，没问题。但是如果我将数字更改为例如 2 并单击提交按钮，它会验证输入并告诉用户数字必须超过 3 才能工作。问题是，如果我将它改回 3，验证就会卡住，并一直说输入中的数字出于某种原因仍低于 3。这是一个您可以对此进行测试的页面：

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

如果你按下开关按钮，它会告诉你数字必须超过三。但是，如果您将数量输入（上面的那个）更改为 2 并提交，然后将其更改回 3，验证将再次出现，说它必须超过 3，而实际上已经超过了 3。任何想法可能会发生在这里？我在 Chrome、Firefox 和 Safari 上试过这个。在所有浏览器上都一样。仅供参考，我正在使用表单助手。

这是输入的代码：

<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')">

这里我将加载最小值设置为 1。但当他们单击 "Club Mamá VIP:" 标签旁边的灰色开关时，我更改了最小值。这是更改输入最小值的代码：

$('#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');
  }
});

即使我将其改回关闭，也应该将最小值改回一。验证告诉我这个数字应该超过 3 D：我真的很困惑。

Answer 1

setCustomValidity 的缺点之一是它的实现不是很简单。

您必须将 setCustomValidity 与 onchange（或类似事件）一起使用才能正常工作。此处有更多详细信息 - Constraint Validation
如果开发者要求 setCustomValidity 在提交时触发，则每次单击提交时都必须清除它，检查验证并重置。

从您的评论中我了解到您需要设置自定义验证消息。在这种情况下，请尝试以下代码：

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
    }
})

HTML 输入数字，最小验证错误

HTML Input Number, min validation error

forms

validation

jquery

input

shopify