JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<form action="action.html" enctype="multipart/form-data" method="post">
		<fieldset>
			<legend>Регистрация</legend>
			<label>
        <span>Имя</span>
				<input type="text" name="name" placeholder="Введите имя">
			</label>
      <br>
			<label>
      <span>Фамилия</span>
				<input type="text" name="last_name" placeholder="Введите фамилию">
			</label>
      <br>
			<label>
      <span>Почта</span>
				<input type="email" name="email" placeholder="Введите почту">
			</label>
      <br>
			<label>
      <span>Пароль</span>
				<input type="password" name="password" placeholder="Введите пароль" id="password">
			</label>
      <br>
			<label>
      <span>Повторите пароль</span>
				<input type="re_password" name="re_password" placeholder="Введите пароль еще раз">
			</label>
      <br>
			<label>
      <span>Город</span>
				<select class="required" title="Выберите город">
					<option value="">--Выберите город--</option>
					<option value="Moscow">Москва</option>
					<option value="Saint-Petersburg">Санкт-Петербург</option>
				</select>
				<div>
			</label>
      <br>
					<input type="radio" id="famele" name="pol" class="required" title="выберите пол" class="pol">
					<label for="famele">Мужской</label>
					
					<input type="radio" id="mele" name="pol" class="pol">
					<label for="famele">Женский</label>
			</div>
			<input type="submit">
		</fieldset>
	</form>

CSS

legend{
	text-align:center;
}
label span {
  display: inline-block;
  width: 200px;
}

JavaScript

$(document).ready(function(){
	$('form').validate({
		rules : {
			name : {
				required : true,
				rangelength : [2, 18]
			},
			last_name : {
				required : true,
				rangelength : [2, 18]
			},
			email : {
				email : true,
				required : true
			},
			password : {
				required : true,
				rangelength : [8, 18]
			},
			re_password : {
				required : true,
				equalTo : '#password'
			}
		},
		messages : {
			name : {
				required : 'Введите имя',
				rangelength : 'Имя не должно быть менее 2-х символов и более 18-и символов'
			},
			last_name : {
				required : 'Введите фамилию',
				rangelength : 'Фамилия не должна быть менее 3-х символов и более 18-и символов'
			},
			email : {
				email : 'Введите корретный адрес электронной почты',
				required : 'Введите адрес электронной почты'
			},
			password : {
				required : 'Введите пароль',
				rangelength : 'Введите пароль от 8-и до 18-и символов'
			},
			re_password : {
				required : 'Введите пароль повторно',
				equalTo : 'Пароли не совпадают'
			}
		},
		errorPlacement: function(error, element) { 
        	if(element.is(":radio") || element.is(":checkbox")){
        		error.appendTo(element.parent()); 
       		}
       		else {
         	error.insertAfter(element);
        	} 
   		} 
	});
});