JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<form action="#" name='test'>
<div class="reg__grid">
<input type="text" name="name" placeholder="nameііі">
</div>
<div class="block__wrap">
<input id="b_1" type="radio" checked class="block__input" name="place">
<label for="b_1" class="block__label">
<span class="block__title">У отделение</span>
</label>
<div class="block__box">
<select class="city__select" name="department" data-placeholder="Выберете отделение" data-search="Поиск">
<option></option>
<option>отделение № 1 ул. Старо 11</option>
<option>отделение № 2 ул. Старо 11</option>
<option>отделение № 3 ул. Старо 11</option>
<option>отделение № 4 ул. Старо 11</option>
</select>
</div>
<input id="b_2" type="radio" class="block__input" name="place">
<label for="b_2" class="block__label block__label--inner">
<span class="block__title">На почту</span>
</label>
<div class="block__box">
<select class="city__select" name="department" data-placeholder="Выберите почтомат" data-search="Поиск">
<option></option>
<option>Поштомат № 1 ул. Старо 11</option>
<option>Поштомат № 2 ул. Стар 11</option>
<option>Поштомат № 3 ул. Старо 11</option>
<option>Поштомат № 4 ул. Старо 11</option>
</select>
</div>
</div>
<button type="submit" class="reg__next">Дальше </button>
</form>
CSS
.block__box {
margin-bottom: 25px;
}
input {
outline: none;
margin-bottom: 5px;
}
input.error {
border-color: red;
}
JavaScript
$(document).ready(function() {
$('select[name="department"]').select2({
placeholder: $(this).data('placeholder'),
language: "uk"
}).on('select2:open', function(e) {
let textPlaceholder = $(this).data('search');
$('.select2-search input').prop('focus', false);
$(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', textPlaceholder);
});
// validation
$('form').validate({
rules: {
name: {
required: true,
},
department: {
required: true,
}
},
messages: {
name: "Поле обязальное",
},
});
})