選択されたオプション値に基づいてフォーム入力フィールドを検証する方法は？

Question

私は選択したオプションに基づいてドロップダウンフィールドでjQueryの検証を使用しています。次の入力フィールドを検証する必要があります。つまり、次のフィールドに英数字を使用できます。そのために私は正規表現を使用しています。 Adharカードのみを選択した場合は、次の入力フィールドに数値を入力できます。 ユーザーがドロップダウンオプションをクリックすると、それを検証したいと思います。私は試みましたが、コードは機能しません。それが間違っている私のコードを確認してください。

$('#idproof').change(function() { 
 

 
    var selection = $(this).val(); 
 
    if (selection == 'pan') { 
 
    var val = document.registration.idnumber; 
 
     var numbers = /^[0-9]+$/; 
 
    if (val.value.match(numbers)) { 
 
     document.registration.zip.focus(); 
 
     return true; 
 
    } else { 
 
     $('#error').empty(); 
 
     $('#error').append('pan number must have numeric characters only'); 
 
     val.focus(); 
 
     return false; 
 
    } 
 
    } else if (selection == 'Adhar') { 
 
    var adhar = document.registration.idnumber; 
 
    var letters = /^[0-9a-zA-Z]+$/; 
 
    if (val.value.match(letters)) { 
 
     document.registration.zip.focus(); 
 
     return true; 
 
    } else { 
 
     $('#error').empty(); 
 
     $('#error').append('Adhar number must have alphanumeric characters only'); 
 
     val.focus(); 
 
     return false; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<div id="error"></div> 
 
<form id="reg" name="registration"> 
 
    <ul> 
 
    <li>IdProof: 
 
     <select id="idproof"> 
 
     <option value="Default">Please select a id type</option> 
 
     <option value="pan">pancard</option> 
 
     <option value="Adhar">AdharCard</option> 
 
     </select> 
 
    </li> 
 
    <li>Id Number: 
 
     <input type="text" id="idnumber" /> 
 
    </li> 
 
    </ul> 
 
</form>

Answer 1

あなたのコードの問題は、それがエラーを投げていたように定義されていない変数でした。私はこれを修正し、いくつかの変更を加えました。

いずれかの入力が変更されたときにエラーを表示し、両方の変更イベント間で関数を共有する方がよいと思います。また、メッセージを表示する前に空の入力をチェックしておくべきです（まだ追加していません）。

var checkValidation = function() { 
 
    $('#error').empty(); 
 
    var selection = $('#idproof').val(); 
 
    var val = document.registration.idnumber; 
 
    if (val.value || val.value === 0) { 
 
     if (selection === 'pan') { 
 
      var numbers = /^[0-9]+$/; 
 
      if (val.value.match(numbers)) { 
 
       // document.registration.zip.focus(); 
 
       return true; 
 
      } else { 
 
       $('#error').append('pan number must have numeric characters only'); 
 
       val.focus(); 
 
       return false; 
 
      } 
 
     } else if (selection === 'Adhar') { 
 
      var letters = /^[0-9a-zA-Z]+$/; 
 
      if (val.value.match(letters)) { 
 
       // document.registration.zip.focus(); 
 
       return true; 
 
      } else { 
 
       $('#error').append('Adhar number must have alphanumeric characters only'); 
 
       val.focus(); 
 
       return false; 
 
      } 
 
     } 
 
    } 
 

 
}; 
 

 
$('#idnumber').change(checkValidation); 
 
$('#idproof').change(checkValidation);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<div id="error"></div> 
 
<form id="reg" name="registration"> 
 
    <ul> 
 
    <li>IdProof: 
 
     <select id="idproof"> 
 
     <option value="Default">Please select a id type</option> 
 
     <option value="pan">pancard</option> 
 
     <option value="Adhar">AdharCard</option> 
 
     </select> 
 
    </li> 
 
    <li>Id Number: 
 
     <input type="text" id="idnumber" /> 
 
    </li> 
 
    </ul> 
 
</form>