Как задать подобного типа валидацию input?

Question

**Здравствуйте, помогите, пожалуйста, с выбором типа валидации для input. Желательно чистый js или того лучше какой-нибудь jquery плагин.

При клике на кнопку с пустым инпутом должна сработать валидация как указана на рисунке. И еще, вне черновой версии кнопка находится в одной форме с инпутом, но разных контейнерах, при копировании кода отсюда возникнут ли у меня проблемы с этим?**

.classicsInput {
  width: 364px;
  height: 40px;
}

.checkoutBtn {
  width: 364px;
  height: 40px;
  background: #000;
  border-radius: 4px;
  border: none;
  color: #fff;
}

<form action="" id="myForm">
  <div class="one>
  <label for=" name "></label>
    <input type=" text " class="form-control classicsInput " placeholder="Имя " name="name " id="name>
  </div>

  <div class="two">
    <button type="submit" class="checkoutBtn">Оформить заказ</button>
  </div>
</form>

Answer 1

Один из многочисленных вариантов:

Обнуляем стили input
Вместо input стилизуем его родительский элемент (в данном примере div)
Делаем input того же размера что и его родительский элемент
Описываем класс, который будет добавляться к элементу в случае ошибки
Описываем псевдоэлемент ::after, который содержит текст ошибки, и который будет отображен в случае если у элемента присутствует класс, который мы описали в пункте 4
Добавляем ему pointer-events: none;, чтобы он не мешал нажимать на input
Слушаем событие submit на форме
Когда оно произошло, перебираем все инпуты и если какой-нибудь из них пустой - добавляем родительскому элементу этого инпута наш созданный в 4-ом пункте класс

const inputs = document.querySelectorAll('input')
const form = document.getElementById('form')

form.addEventListener('submit', e => {
  e.preventDefault()

  inputs.forEach(input => {
    if (input.value.length < 1)
      input.parentNode.classList.add('error')
    else
      input.parentNode.classList.remove('error')
  })
})

form.addEventListener('input', e =>
  e.target.parentNode.classList.remove('error'))

body {
  height: 100vh;
  margin: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 300px;
  height: 45px;
  padding: 0 15px;
  margin-bottom: 14px;
  border: 1px solid black;
  
  border-radius: 5px;
  overflow: hidden;
}

input {
  width: 100%;
  height: 100%;
  
  border: none;
  outline: none;
}

div.error {
  position: relative;
  border: 1px solid red;
}

div.error::after {
  content: 'Обязательное поле';
  
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  
  color: red;
  pointer-events: none;
}

<form id="form">
  <div><input type="text" placeholder="Имя"></div>
  <div><input type="text" placeholder="Фамилия"></div>
  <button>SUBMIT</button>
</form>

Answer 2

$('#myForm').submit((e)=>{
    if($('#name').val() !== '')return true;
    $('#name').addClass('wrongValue');
    $('#name').next().fadeIn();
    e.preventDefault();
});

.classicsInput {
    width: 364px;
    height: 40px;
}

.checkoutBtn {
    width: 364px;
    height: 40px;
    background: #000;
    border-radius: 4px;
    border: none;
    color: #fff;
}

.wrongValue {
    border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="myForm">
    <div class="one">
        <label for="name"></label>
        <input type="text" class="form-control classicsInput" placeholder="Имя" name="name" id="name">
        <span style="display:none" class="some-form__hint">Обязательно для заполнения</span>
    </div>
    <div class="two">
        <button type="submit" class="checkoutBtn">Оформить заказ</button>
    </div>
</form>

Answer 3

Считаю, что обязательные поля должны быть подсвечены изначально. Негоже дёргать пользователя каждый раз, когда он нажимает кнопку. Правильно, если кнопка будет недоступна, пока не будут введены необходимые правильные данные (хотя окончательная валидация однозначно должна происходить на сервере).

Для полёта мысли, как вариант, реализация без JS:

.order_block {
  display: inline-flex;
  flex-flow: column nowrap;
  padding: 6px;
  box-shadow: 0 0 2px black;
  border-radius: 2px;
  width: 364px;
  font: 13px 'Arial';
}

.form_ctrl {
  height: 40px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 0 2px black;
}

.input_txt, .input_num {
  margin: 0 0 6px;
  }
.input_txt:invalid, .input_num:invalid {
  box-shadow: inset 0 0 4px 1px red;
}

.msg_block {
  position: relative;
  pointer-events: none;
  user-select: none;
}

.msg_error {
  position: absolute;
  bottom: 17px;
  right: 8px;
  color: #f000;
  transition: ease 2s;
  }
.input_txt:invalid:not(:focus)+.msg_block>.msg_error,
.input_num:invalid:not(:focus)+.msg_block>.msg_error {
  color: #f00f;
  transition: ease 1s;
}

.btn_submit {
  pointer-events: none;
  color: #888;
  box-shadow: inset 0 0 20px 0px gray;
  transition: ease .5s;
  }
.input_txt:valid~.input_num:valid~.btn_submit {
  pointer-events: auto;
  color: #fff;
  box-shadow: inset 0 0 20px 20px black;
  cursor: pointer;
}

<form action="" id="myForm">
  <div class="order_block">
    <input class="form_ctrl input_txt" placeholder="Ваше полное имя" name="name" pattern="[\wа-яА-ЯёЁ]+" required>
    <div class="msg_block"><div class="msg_error">Обязательное поле</div></div>
    <input class="form_ctrl input_num" placeholder="Количество товара" name="num" pattern="[1-9][0-9]*" required>
    <div class="msg_block"><div class="msg_error">Обязательное поле</div></div>
    <button type="submit" class="form_ctrl btn_submit">Оформить заказ</button>
  </div>
</form>

БЛОГ НА HUSL

Как задать подобного типа валидацию input?

Ответы (3 шт):