如何根據選擇的選項值驗證表單輸入字段？

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>