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

Question

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>

WheretheresaWill · Accepted Answer · 2016-10-06 08:52:37Z

2

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>

edited Oct 6, 2016 at 8:52

answered Oct 5, 2016 at 20:16

WheretheresaWill

6,6088 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vicky Nandne Over a year ago

please suggest me how check for an empty input before showing the message .

WheretheresaWill Over a year ago

I've added the extra check for if (val.value || val.value === 0). So the validation will only run if there is text in the input or 0. If 0 is not allowed then just remove the || val.value === 0)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related