2016-08-30 34 views
1

私はしばらくこの問題に取り組んできました。
ドロップダウンリストの値がの割合がの場合、値を渡さないためのテキストボックスを検証しようとしています。
これは私のhtmlコードです:falseが返されたときにJQuery検証カスタムメソッドが表示されない

<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"で、iエラーメッセージを表示すると思われますが、それは何らかの理由ではありません。 私は何が間違っていますか?

答えて

1

私はthis fiddle

で作成したコードに基づいて作業例を持っている私が行った変更は、次のとおりです。

  1. は、入力の周りにフォームを追加し、フォームとinputid属性を追加しました。これが行われた理由は、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メソッドが直接呼び出されなくなりました。フォーム全体を検証することもできます。これは通常どおりに行われます。

+0

回答していただきありがとうございます。私はあなたの提案したことを実行していますが、今は別の問題があります。 "$("#increaseBudgetByValue ")。valid()"を使用し、入力が必要なので、 "入力が必要です"と警告するスパンテキストを変更する必要があります。 –

+0

コードを修正しましたか?私は私のフィドルで "入力が必要です"というエラーは決して見られません。あるいは、私は正しいステップを逃していますか? – Dhananjay

+0

可視スパン要素、すなわち 'span [data-review = 'Increase_budget_if_unit']'を使用する代わりに、隠しスパン要素を追加して 'ifUnit'の値を保持することができます。 'lowerThan100Percent'は隠された範囲の値になります – Dhananjay

関連する問題