JQuery 验证自定义方法在返回 false 时不显示

Question

我已经为这个问题苦恼了一段时间。
如果下拉列表中的值是 percentage，我正在尝试验证一个文本框是否不传递值 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%");

我在用户 select 其他列表值时调用该函数：

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

我在调用函数时发送的所有参数都按预期传递并且 return 的结果也是 "False" 并且它应该显示错误消息，但它不是来自某些原因。我做错了什么？

Answer 1

我有一个基于您在 this fiddle

中创建的代码的工作示例

我所做的修改是：

在输入框周围添加了一个表单，并向表单和 input 添加了 id 属性。请参阅 this post 了解这样做的原因。
将自定义验证器方法连接到输入：

//初始化验证器 var validator = $('#validatorForm').validate({ // 初始化插件规则：{ 增加预算值：{ lowerThan100Percent：真 } }<br> });
最后，必须通过调用其 valid 方法在输入元素上触发验证，这是在 click 处理程序中完成的。我先设置了span[data-review='Increase_budget_if_unit']的内容，因为lowerThan100Percent方法不再直接调用了。您还可以验证整个表单——这是通常的做法。

JQuery 验证自定义方法在返回 false 时不显示

JQuery validation custom method not show when false is returned

javascript

jquery

jquery-validate