Question

现在我有一个输入类型编号的问题，我在页面加载时将其设置为min 1。当元素发生变化时，我将最小数量更改为3.到此为止没问题。如果我提交表格，它会超过三个没问题。但是，如果我将数字更改为2并单击提交按钮，它会验证输入并告诉用户数字必须超过3才能工作。问题是，如果我将其更改回3，验证会卡住，并且由于某种原因继续说输入上的数字仍然低于3。这是一个可以测试它的页面：

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

如果按下开关按钮，它会告诉您数字必须超过三。但是如果您将数量输入（上面的那个）更改为2并提交然后将其更改回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')">

这里我设置加载min为1.但是当他们点击“ClubMamáVIP：”标签旁边的灰色开关时我更改了min。以下是更改输入的最小值的代码：

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

即使我将其更改为关闭，也应该将min更改为1。验证告诉我数字应该超过3D：我真的很困惑。

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输入数字，最小验证错误

1 个答案: