CODEWITHSUNDEEP
javascriptjqueryregexvalidation
Vicky Nandne
Vicky Nandne

Reputation: 23

How to validate form input field based on option value selected?

I'm using jQuery validation on drop-down field, on based of selected option I have to validate Next input feild, i.e. if I have selected pan card then in next field alphanumeric characters allowed. For that I'm using Regular Expression. And then on select of Adhar card only Numeric values allowed in next input field. I want to validate it once user clicks on drop down option. I tried, but code is not working. Please check my code where it goes wrong.

$('#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>

Upvotes: 1

Views: 2718

Answers (1)

WheretheresaWill
WheretheresaWill

Reputation: 6480

The problem with your code was a variable not being defined so it was throwing an error. I've fixed this, and made some other changes.

I think you'd be better showing the error when either of the inputs are changed, and sharing the function between both change events. Also, you should probably check for an empty input before showing the message (I haven't added that in yet).

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>

Upvotes: 2

Related Questions