JSFiddle - React, Tailwind, and code Playground

by RaggaMaffin

HTML

<form action="#" id="feedback-form" class="feedback-form">
				<div class="feedback-form__item">
					<span class="feedback-num">1</span><span class="feedback-option">Фамилия и имя</span>
					<input type="text" name="username" class="feedback-input" placeholder="Сидоров Александр" >
				</div>
				<div class="feedback-form__item">
					<span class="feedback-num">2</span><span class="feedback-option">Электронная почта</span>
					<input type="email" name="email" class="feedback-input" placeholder="Sidorov@yandex.ru" >
				</div>
				<div class="feedback-form__item">
					<span class="feedback-num">3</span><span class="feedback-option">Телефон</span>
					 <input type="tel" name="phone" class="feedback-input phone"  placeholder="+7 (999)-328-14-20"> 
				</div>
				<div class="feedback-form__item">
					<span class="feedback-num">4</span><span class="feedback-option">Какой деятельностью, не связанной с текущими проектами, вы бы хотели заниматься в рабочее время?</span>
					<textarea type="text" id="textarea" placeholder="Свой проект по созданию универсальной инфраструктуры строительства"></textarea>
				</div>
				<div class="feedback-form__item">
					<button type="submit" id="submit" class="feedback-btn"><span class="feedback-btn__text">Отправить</span></button>
				</div>
			</form>

CSS

.feedback-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 500px;
  margin: auto;
}

.feedback-form__item {
  margin-bottom: 15px;
  position: relative;
}
.feedback-input {
  line-height: 20px;
  display: block;
  width: 100%;
}
textarea {
  display: block;
}

JavaScript

$(document).ready(function () {
	$('#feedback-form').validate({
			errorClass: "invalid",
			errorElement: "div",
			rules: {
				username: {
					required: true,
					minlength: 2,
					maxlength: 15
				},
				phone: "required",
				email: {
					required: true,
					email: true
				},
			},
			messages: {
				username: {
					minlength: jQuery.validator.format("от 2 до 15 символов"),
					maxlength: jQuery.validator.format("до 15 символов"),
					required: "Заполните поле"
				},
				phone: {
					required: "Заполните поле"
				},
				email: {
					email: "Введите корректный email",
					required: "Заполните поле"
				},
			},
	/////////////////  маска телефона   /////////////////
	$(".phone").mask("8 (999) 999-9999");
	});