0

Подскажите как пофиксить код валидации поля input. Условия валидации:

  1. Заперетить ввод знаков +, -, e
  2. Запретить вводить количество цифр больше 9
  3. Граница инпута должна быть красной до тех пор пока не будет введено 9 цифр
  4. Кнопка Send становится доступной для нажатия, после того как будет введено 9 цифр

Ниже код, который работает на ПК, но на мобильной клавиатуре при вводе 10-ой цифры удаляется послепдняя и заменяется вводимой.

Вставил код из проекта. Но не знаю как правильно его здесь подключить.

export default {
  data: () => ({
    accessCode: '',
    maxLengthAceessCode: 9,
    isAccessCodeValid: false
  }),
  methods: {
    checkAccessCode(event) {
      try {
        if (!Number(event.data.replace(/\D/g, '').substr(0, this.maxLengthAceessCode))) {
          this.accessCode = this.accessCode.slice(0, -1)
        }

        if (this.accessCode.length === this.maxLengthAceessCode) {
          this.isAccessCodeValid = !this.isAccessCodeValid
        }
      } catch (error) {
        this.isAccessCodeValid = false
      }
    },
  },
}
input.invalide:focus {
  border: 1px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="d-flex flex-column mt-auto align-self-center">
  <div 
    v-if="isCallInProgress" 
    class="form-group mb-5"
  >
    <label for="acces-code">Access code</label>
    <div class="input-group input-group-lg">
      <input
        v-model="accessCode"
        class="form-control" 
        :class="{invalide: !isAccessCodeValid}"
        id="acces-code" 
        type="tel"
        maxlength="9"
        inputMode="numeric"
        pattern="[0-9]*"
        autofocus
        autocomplete="off"
        aria-label="Access code" 
        aria-describedby="basic-addon" 
        style="width:135px"
        @input="checkAccessCode"
        @paste.prevent
      >
      <div class="input-group-append">
        <button 
          class="btn btn-primary btn-lg"
          :class="{disabled: !isAccessCodeValid}" 
          type="button" 
          style="border-top-left-radius: 0; border-bottom-left-radius: 0"
        >
          Send
        </button>
      </div>
    </div>
    <small id="codeHelp" class="form-text text-muted">Access сode must include 9 digits</small>
</div>

0

1 ответ 1

0

С Vue не работаю, написал на чистом JS, может логика решения поможет. На счёт телефона, если честно, не проверял, как себя ведёт последняя цифра. В регулярке стоит английская e. Если нужно, поменяете на русскую.

const input = document.querySelector('.input');
const button = document.querySelector('button');

input.addEventListener('input', () => {
    let inputValue = input.value.replace(/[e,+,-]/g, '');
    input.value = inputValue;

    if (input.value.length === 9) {
        input.classList.add('success');
        button.disabled = false;
    } else {
        input.classList.remove('success');
        button.disabled = true;
    }
});
.input {
   outline: transparent;
   border: 1px solid red;
}
.input.success {
   border: 1px solid green;
}
button:disabled {
   opacity: 0.5;
}
<input class="input" type="tel" maxlength="9">
<button disabled="true">Send</button>

1
  • Благодарю за помощь!
    – Vik
    Commented 5 мая 2022 в 13:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.