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

时间:2016-08-30 07:25:04

标签: javascript jquery jquery-validate

我一直在努力解决这个问题 我正在尝试验证文本框,如果下拉列表中的值为百分比,则不会传递值 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”,它假设显示错误消息,但它不是出于某种原因。 我做错了什么?

1 个答案:

答案 0 :(得分:1)

我有一个基于您在this fiddle

中创建的代码的工作示例

我所做的改变是:

  1. 在输入周围添加了一个表单,并将id属性添加到表单和input。请参阅this post了解为何这样做。
  2. 将自定义验证器方法连接到输入:

    //Initialize the validator var validator = $('#validatorForm').validate({ // initialize the Plugin rules: { increaseBudgetByValue: { lowerThan100Percent: true } }
    });

  3. 最后,必须通过调用其valid方法在输入元素上触发验证,这在click处理程序中完成。我设置了span[data-review='Increase_budget_if_unit']的内容,不再直接调用第一个sinjce lowerThan100Percent方法。您还可以验证整个表单 - 通常是这样做的。