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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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