autotab to next input field is not working after jQuery validation

I have 3 textbox like below, i would like to add autotab to this input field and is working very first. When the validation comes ie after validation error the autotab functionality is not working. when these inputs are empty validation will work and will focus on red as required at that time i cant see the autotab functionality. Please help me to solve this.

<input type="text" name="otp1" id= "otp1" class="otp-btn" maxlength="1">
<input type="text" name="otp2" id= "otp2" class="otp-btn" maxlength="1">
<input type="text" name="otp3" id= "otp3" class="otp-btn" maxlength="1">

 $(document).ready(function () {
    $("#updatePassForm input:text").first().focus();
    $(".otp-btn").keyup(function (e) {
    e.preventDefault();
    if (this.value.length == this.maxLength) {
      $(this).next('.otp-btn').focus();
    }
}); 

    $('#updatePassForm').validate({
      rules: {
        otp1: {
          required: true,
        },
        otp2: {
          required: true,
        },
        otp3: {
          required: true,
        },
      },
      messages: {
        otp1: {
          required: '',       
        },
        otp2: {
          required: '',       
        },
       otp3: {
          required: '',       
        },
      },
      submitHandler: function (form) {
}
});