Javascript UK Sort code validation with three input field

Question

I have one payment page where I have three field called sort code each field can have 2 two digit I want to write java script code to validate this field and as user type 2 digit in first field its should jump to next field. how to validate static sort code.

Possible duplicate of Javascript validate X number of fields in an HTML form — Alessandro Da Rugna
– Alessandro Da Rugna, Commented Mar 7, 2016 at 11:01

Hazonko · Accepted Answer · 2016-03-07 10:55:19Z

0

$('.input').on('keyup', function(e) {
    if ($(this).length == 2) {
        $('.next-input').focus();
    }
}

answered Mar 7, 2016 at 10:55

Hazonko

1,0351 gold badge15 silver badges30 bronze badges

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

Comments

xpy · Accepted Answer · 2016-03-07 12:37:09Z

You'll have to create a collection of your inputs, and proceed to the next item in the collection after the second letter is typed.

var $inputs = $('.input-class');


$inputs.on('keyup', function() {
  if ($(this).val().length == 2) {
    $inputs.eq($inputs.index(this) + 1).focus();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <table>
    <tr>
      <td>
        <input type="text" class="input-class input-1">
      </td>
      <td>
        <input type="text" class="input-class input-2">
      </td>
      <td>
        <input type="text" class="input-class input-3">
      </td>
      <td>
        <input type="text" class="input-class input-4">
      </td>
      <td>
        <input type="text" class="input-class input-5">
      </td>
    </tr>
  </table>
</form>

If you'd like a more fine tuned solution, you can add as a data-attribute the selector of the next input

var $inputs = $('.input-class');


$inputs.on('keyup', function() {
  if ($(this).val().length == 2) {
    $($(this).data('next')).focus();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <table>
    <tr>
      <td>
        <input type="text" class="input-class input-1" data-next=".input-3">
      </td>
      <td>
        <input type="text" class="input-class input-2" data-next=".input-4">
      </td>
      <td>
        <input type="text" class="input-class input-3" data-next=".input-5">
      </td>
      <td>
        <input type="text" class="input-class input-4" data-next=".input-1">
      </td>
      <td>
        <input type="text" class="input-class input-5" data-next=".input-2">
      </td>
    </tr>
  </table>
</form>

This is just the "go to next" code, no validation is performed.

Collectives™ on Stack Overflow

Javascript UK Sort code validation with three input field

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related