现在我有一个输入类型号的问题,我在页面加载时将其设置为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 . 以下是更改输入的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:我真的很困惑 .
1 回答
setCustomValidity
的一个缺点是它的实现并不是很简单 .您必须使用
setCustomValidity
与onchange
(或类似事件)才能正常工作 . 这里有更多细节 - Constraint Validation如果开发人员要求
setCustomValidity
在提交时触发,则必须在每次单击提交时清除它,检查验证并重置 .从您的评论中我了解到您需要设置自定义验证消息 . 在这种情况下,请尝试以下代码:
HTML
JAVASCRIPT