input.addEventListener("blur",function){
this.classlist.remove('error');
if(this.value === ''){
this.classlist.add('error');
}
if(!Регулярка.test.value){
this.classlist.add('error');
}
}
ну примерно такlet reservationForm = document.querySelector('.reservationForm');
let reservationFormReq = document.querySelectorAll('.reservationForm ._input');
reservationForm.onsubmit = function(){
let index = 0;
for(let i = 0;i<reservationFormReq.length;i++){
reservationFormReq[i].classList.remove('empty');
if(reservationFormReq[i].value === ''){
reservationFormReq[i].classList.add('empty');
index++;
}
}
if(index === 0){
alert('succses');
}
}.reservationForm{
width: 100%;
}
.form__holder{
width: 100%;
display: grid;
grid-template-columns: 48% 48%;
justify-content: space-between;
grid-row-gap: 12px;
margin: 35px 0;
}
.form__item{
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
}
.item-form{
height: 52px;
width: 100%;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.1);
color: black;
font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
padding: 0.375rem 0.75rem;
font-family: 'Poppins', sans-serif;
}
.form__title{
font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
color: black;
font-weight: 600;
margin-bottom: 10px;
}
.item-form::placeholder{
font-family: 'Poppins', sans-serif;
color: #666;
font-size: calc(13px + 2 * ((100vw - 320px) / (1280 - 320)));
}
#reservation-select{
display: none;
}
.custom-select{
height: 52px;
width: 100%;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.1);
color: black;
font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
padding: 0.375rem 0.75rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
cursor: pointer;
}
.custom-select.empty{
border-color: red;
}
.custom__select__title{
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.custom-select i{
transform: rotate(180deg);
font-size: 20px;
}
.dropdown-select{
position: absolute;
left: 0;
top: 100%;
width: 100%;
border: 1px solid black;
transform: translateY(40px);
transition: 0.3s ease;
opacity: 0;
visibility: hidden;
}
.dropdown-select.active{
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.dropdown-item{
width: 100%;
background: white;
padding: 0.375rem 0.75rem;
}
.dropdown-item:hover{
background: black;
color: white;
}
.dropdown-item.active{
background: black;
color: white;
}
.reservation-button{
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
background: #c8a97e;
padding: 12px 20px;
border: 1px solid #c8a97e;
outline: none;
font-family: 'Poppins', sans-serif;
font-size: calc(13px + 3 * ((100vw - 320px) / (1280 - 320)));
color: white;
font-weight: 400;
transition: 0.3s ease;
cursor: pointer;
}
.reservation-button:hover{
background: transparent;
color: #c8a97e;
}
.reservationForm ._req.empty{
border-color: red;
}