選択後に入力フィールドを検証する

Question

valutaドロップダウンリストを選択した後、最小値を持つ入力フィールドを検証するための助けが必要です。

<div class="row"> 
    <header class="margin-bottom-20">I hereby guarantee payment up to:</header> 
    <section class="col col-6"> 
     <label class="input">Amount 
      <input type="text" name="amount" id="amount" value="7500"> 
     </label> 
    </section> 

    <section class="col col-6"> 
     <label class="select">Valuta 
      <select name="valuta" id="valuta" onChange="Choice();"> 
       <option value="SEK">SEK</option> 
       <option value="EUR">EUR</option> 
      </select> 
      <i></i> 
     </label> 
    </section>           
</div> 

それは最低価格予め充填されていvalutaを選択した後：ここで

は、フォームの一部です。ここにjQueryがあります：

<script type="text/javascript"> 
    $('#valuta').change(function(){ 
     console.log("test"); 
     var amount = this.value; 
     var str = ""; 

     switch(amount){ 
      case "SEK": 
       str = "2500"; 
       break; 
      case "EUR": 
       str = "250"; 
       break; 
     } 
     $("#amount").val(str); 
    }); 
</script> 

ここでは、少なくとも私にとっては難しい部分があります。私は選択したvalutaの後に入力フィールドを検証する必要があります。私はjQueryの検証を使用していますが、私は上記のjQueryと検証をどのように組み合わせることができるのか分かりません。

 // Validation 
     $("#my-form").validate({ 
      // Rules for form validation 
      rules: 
      { 
       amount: 
       { 
        required: true, 
        min: 2500 (When SEK is selected) 
        min 250 (When EUR is selected) 
       }, 

Answer 1

jQueryに独自のカスタム検証メソッドを追加できます。

$.validator.addMethod('minRule', function (value, el, param) { 
     if($('#valuta').val() == "SEK") 
      return value > 2500; 
     if($('#valuta').val() == "EUR") 
      return value > 250; 
    },"Please provide enter correct amount"); // Message added 

使用法：

amount: { 
    required: true, 
    minRule: 0, 
    number: true 
} 

Answer 2

私はほとんどそれが次のコードで動作するようになった：それは、入力フィールドの値をSEKに事前に選択されているため、今

<script type="text/javascript"> 
    $('#valuta').change(function(){ 
     console.log("test"); 
     var amount = this.value; 
     var str = ""; 

     switch(amount){ 
      case "SEK": 
       str = "2500"; 
       break; 
      case "EUR": 
       str = "250"; 
       break; 
     } 
     if ($('#valuta').val() == 'SEK') { 
      $('#amount').val("2500"); 
      $('#amount').attr("min", 2500); 
     } else if($('#valuta').val() == 'EUR') { 
      $('#amount').val("250"); 
      $('#amount').attr("min", 250); 
     } 

     $("#amount").val(str); 


    }); 
</script> 

問題は、あります2500の場合、検証は機能しません。私は金額を1に変更することができ、それは有効な入力ですが、2500以上でなければなりません。 私はそれをEURに変更して250未満の金額を変更し、再度SEKに変更して2500未満の金額を変更すると動作します。誰かが1に変更したときに事前選択された値を検証するにはどうすればよいですか？

Answer 3

jqueryをスローすると、このケースのみが検証されます。そのことがあなたを混乱させる可能性があります。あなたはまだjqueryを学ぶので。

私は可能な限りコードを編集します。私たちは、通常のように、すべてのフィールドに、ここで

<div class="row"> 
    <header class="margin-bottom-20">I hereby guarantee payment up to:</header> 
    <section class="col col-6"> 
     <label class="input">Amount 
      <input type="text" name="amount" id="amount" value="7500" required> 
     </label> 
    </section> 

    <section class="col col-6"> 
     <label class="select">Valuta 
      <select name="valuta" id="valuta" > 
      <option value="">pick valuta</option> 
       <option value="SEK">SEK</option> 
       <option value="EUR">EUR</option> 
      </select> 
      <i></i> 
     </label> 
    </section>           
</div> 
<script src="jquery-1.11.3.js"></script> 
<script> 
$(function(){ 
    $('#valuta').change(function(){ 
     var valuta = $(this).val(); 
var amount = $('#amount').val(); 

     switch(valuta){ 
      case "SEK": 
       if(amount<2500) amount=2500; 
       break; 
      case "EUR": 
       if(amount<250) amount=250; 
       break; 
     } 
     $("#amount").val(amount); 
    }); 
}); 
</script>