0

$("#confirm-button-next").on("click", function() {
  $("div.error").remove();
  if ($("#order_fio").val().length < 1) {
    $("#order_fio").after('<div class="error" style="margin-top:15px;"><font color="red">Заполните поле "Ф.И.О"!</font></div>');
    setTimeout(function() {
      $("div.error").remove();
    }, 5000);
    return false;
  }
  if ($("#order_phone").val().length < 1) {
    $("#order_phone").after('<div class="error" style="margin-top:15px;"><font color="red">Заполните поле "Моб. номер"!</font></div>');
    setTimeout(function() {
      $("div.error").remove();
    }, 5000);
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field field--optional field--half" data-address-field="first_name">

  <div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_first_name">Ф.И.О</label>
    <input name="order_fio" placeholder="Ф.И.О" autocomplete="shipping given-name" data-backup="first_name" class="field__input" size="30" type="text" id="order_fio">
  </div>
</div>
<div class="field field--required field--half" data-address-field="last_name">

  <div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_last_name">Моб. номер</label>
    <input name="order_phone" placeholder="Моб. номер" autocomplete="shipping family-name" data-backup="last_name" class="field__input" aria-required="true" size="30" type="text" name="checkout[shipping_address][last_name]" id="order_phone">
  </div>
</div>
<button style="margin-top:15px;" type="submit" name="submitdata" id="confirm-button-next" name="button" type="submit" class="step__footer__continue-btn btn">
<span class="btn__content">Оформить заказ</span>
<i class="btn__spinner icon icon--button-spinner"></i>
</button>

Подскажите, как сделать так чтобы в поле "Ф.И.О" нельзя было вводить цифры, а в поле "Моб. номер" буквы. И ещё кое что, как сделать чтобы при ошибке вместе с сообщением "Заполните поле" обводилось поле красным цветом?

4
  • используйте события keypress, keyup, keydown и вырезайте цифры, а в мобиле буквы.
    – And
    27 ноя 2017 в 3:16
  • "нельзя было вводить цифры" в принципе или при нажатии на кнопку проверяли бы значения и отображалась ошибка при недопустимых символах в полях?
    – Alex
    27 ноя 2017 в 15:14
  • @Alex опять Вы, добрый человек :) сперва рассчитывал на то чтобы просто нельзя было вводить в поле цифры. Но теперь мне понравилась идея чтобы при нажатии на кнопку писало к примеру "Цифры не поддерживаются" 27 ноя 2017 в 15:17
  • @Alex а как теперь объединить с ru.stackoverflow.com/questions/750016/…? Там же должно проверять и на пустое поле 27 ноя 2017 в 16:17

3 ответа 3

2

/^[а-яa-z]+$/i - только русские и английские буквы

/^\d+$/ - только целые числа

$("#confirm-button-next").on("click", function() {

  $("div.error").remove();
  if ($("#order_fio").val().length > 0 && !/^[а-яa-z]+$/i.test($("#order_fio").val())) {
    $("#order_fio").after('<div class="error" style="margin-top:15px;"><font color="red">Допустимы только буквы!</font></div>');
    setTimeout(function() {
      $("div.error").remove();
    }, 5000);
    return false;
  }
  if ($("#order_phone").val().length > 0 && !/^\d+$/.test($("#order_phone").val())) {
    $("#order_phone").after('<div class="error" style="margin-top:15px;"><font color="red">Допустимы только цифры"!</font></div>');
    setTimeout(function() {
      $("div.error").remove();
    }, 5000);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field field--optional field--half" data-address-field="first_name">

  <div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_first_name">Ф.И.О</label>
    <input name="order_fio" placeholder="Ф.И.О" autocomplete="shipping given-name" data-backup="first_name" class="field__input" size="30" type="text" id="order_fio">
  </div>
</div>
<div class="field field--required field--half" data-address-field="last_name">

  <div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_last_name">Моб. номер</label>
    <input name="order_phone" placeholder="Моб. номер" autocomplete="shipping family-name" data-backup="last_name" class="field__input" aria-required="true" size="30" type="text" name="checkout[shipping_address][last_name]" id="order_phone">
  </div>
</div>
<button style="margin-top:15px;" type="submit" name="submitdata" id="confirm-button-next" name="button" type="submit" class="step__footer__continue-btn btn">
<span class="btn__content">Оформить заказ</span>
<i class="btn__spinner icon icon--button-spinner"></i>
</button>

2
2

Для запрета ввода букв в поле input задайте ему type="tel". А для сообщения об ошибке напишите required

Прим:

<input name="order_phone" placeholder="Моб. номер" type="tel" required>
1
  • Плюс type=numeric - ввод только цифр
    – nick_n_a
    19 фев 2018 в 7:39
2

В html5 на input есть аттрибут pattern, который проверяет соответствие ввода любому паттерну (регуляторному выражению).

Красная рамка для инвалидного ввода делается через CSS

input:invalid {
    border: 2px solid red;
}
<!-- Только цифы -->
<input type="text" name="name1" placeholder="введите телефон" pattern="^[0-9]+$" required>

<!-- Только буквы, русские и английские -->
<input type="text" name="name2" placeholder="введите Ф.И.О." pattern="^[а-яА-ЯеЁa-zA-Z]+$" required>

Ваш ответ

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

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