Блог

У меня есть 3 текстовых поля, как показано ниже, я хотел бы добавить автотаблицу в это поле ввода и работает в первую очередь. Когда проверка происходит, т. е. после ошибки проверки, функция автоматической проверки не работает. когда эти входные данные будут пустыми, проверка будет работать и будет сосредоточена на красном, как требуется, в то время как я не могу видеть функциональность автоматической вкладки. Пожалуйста, помогите мне решить эту проблему.

 <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) {
}
});
 

Причина в том, next что функция селектора jQuery получает сразу следующий элемент-брат. Поэтому , когда проверка показывает next ссылку на метку ошибки, созданную jquery et, поскольку у нее нет класса css otp-btn , она не сфокусирована.

Таким образом, решением было бы объединить все последующие элементы, имеющие класс otp-btn , а затем извлечь первый элемент.

что-то вроде этого: .nextAll('.otp-btn').first() вместо .next('.otp-btn')