我一直在努力解决这个问题
我正在尝试验证文本框,如果下拉列表中的值为百分比,则不会传递值 100 。
这是我的HTML代码:
<input type="number" class="inline-form-input" value="" data-action="Increase_budget"
name="increaseBudgetByValue" data-review="Increase_budget_by_value" placeholder="Enter value">
<p>if</p>
<div class="select_p select_narrow" id="automated-rules-increase-budget-if-unit" data-target="increaseBudgetIfUnit">
<div class="select">
<div class="select_in">
<span data-review="Increase_budget_if_unit">$</span>
</div>
</div>
<div id="ifUnitDDL" class="select_drop">
<ul>
<li value="$">$</li>
<li value="%">%</li>
</ul>
</div>
</div>
我创建了一个自定义方法来在输入发生变化时验证输入并且工作正常:
jQuery.validator.addMethod("lowerThan100Percent", function (value, element, params) {
debugger;
return !(parseInt(value) > 100 && ($("span[data-review='Increase_budget_if_unit']").text() === "%" || params.ifUnit === "%"));
}, "*Cannot pass the 100%");
当用户选择其他列表值时,我调用该函数:
$("#ifUnitDDL li")
.on("click",
function (e) {
debugger;
var ifUnit = $(this).text();
if (ifUnit === "%") {
var element = $("input[name='increaseBudgetIfValue']");
var value = element.val();
var params = { ifUnit: ifUnit };
jQuery.validator.methods.lowerThan100Percent.call(value, value, element[0], params);
}
});
我调用函数时发送的所有参数都按预期传递,返回的结果也是“False”,它假设显示错误消息,但它不是出于某种原因。 我做错了什么?
答案 0 :(得分:1)
我有一个基于您在this fiddle
中创建的代码的工作示例我所做的改变是:
id
属性添加到表单和input
。请参阅this post了解为何这样做。将自定义验证器方法连接到输入:
//Initialize the validator
var validator = $('#validatorForm').validate({ // initialize the Plugin
rules: {
increaseBudgetByValue: {
lowerThan100Percent: true
}
}
});
最后,必须通过调用其valid
方法在输入元素上触发验证,这在click
处理程序中完成。我设置了span[data-review='Increase_budget_if_unit']
的内容,不再直接调用第一个sinjce lowerThan100Percent
方法。您还可以验证整个表单 - 通常是这样做的。