Здравствуйте, вопрос такой, мне нужно чтобы при нажатии кнопки "отправить" и не заполненном поле выводило ошибку, иначе код отрабатывался.
const addVideo = document.querySelector('.btn-success-form');
addVideo.addEventListener('click', function(event){
var nameVideo = document.querySelector('.nameVideo');
var input = document.querySelector('#imageVideo');
var error = document.querySelector('.error');
var curFile = input.files;
var btnGenere = document.querySelector('.btn-genere');
const videoCard = `
<div class="col mb-4">
<div class="card">
<img src="${url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${nameVideo.value}</h5>
<div class="wrapper__footer-card">
<span class="fa fa-star rating-star"></span>
<span class="card-rate">${checkbox}</span>
<span class="card-genere">${genere}</span>
<span class="card-sort">${sortCheck}</span>
</div>
</div>
</div>
</div>
`;
})
function validateCard(){
event.preventDefault();
var blockSerials = document.querySelector('#serials');
var blockFilms = document.querySelector('#films');
if(!nameVideo.value){
nameVideo.style.border = "2px solid red";
var errName = document.createElement('p');
errName.textContent = 'Название не выбрано';
error.appendChild(errName);
}
if(!checkbox){
var errRate = document.createElement('p');
errRate.textContent = 'Рейтинг не указан';
error.appendChild(errRate);
}
if(!genere){
btnGenere.style.border = "2px solid red";
var errGenere = document.createElement('p');
errGenere.textContent = 'Жанр не выбран';
error.appendChild(errGenere);
}
if(curFile.length == 0){
var errFile = document.createElement('p');
errFile.textContent = 'Файл для загрузки не выбран';
error.appendChild(errFile);
}
if(sortCheckAttr == 'films'){
blockFilms.insertAdjacentHTML('beforeend', videoCard);
} else if(sortCheckAttr == 'serials'){
blockSerials.insertAdjacentHTML('beforeend', videoCard);
} else {
var errSort = document.createElement('p');
errSort.textContent = 'Направление не выбрано';
error.appendChild(errSort);
}
}
<form action="" id="form__addVideo" onsubmit="return validateCard()">
<div class="wrapper__form">
<div class="wrapper__form__createCardVideo">
<h2 class="form__title form__title-inputName">Введите название:</h2>
<input class="nameVideo" type="text" name="nameVideo" placeholder="Название">
<div class="rating-area">
<h2 class="form__title form__title-rating">Как оцениваете:</h2>
<div class="wrapper__rating-area">
<input type="radio" id="star-5" name="rating" value="5">
<label for="star-5" title="Оценка «5»"></label>
<input type="radio" id="star-4" name="rating" value="4">
<label for="star-4" title="Оценка «4»"></label>
<input type="radio" id="star-3" name="rating" value="3">
<label for="star-3" title="Оценка «3»"></label>
<input type="radio" id="star-2" name="rating" value="2">
<label for="star-2" title="Оценка «2»"></label>
<input type="radio" id="star-1" name="rating" value="1">
<label for="star-1" title="Оценка «1»"></label>
</div>
</div>
<h2 class="form__title form__title-genere">Выберите жанр:</h2>
<div class="btn-group dropright genere-dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle btn-genere" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Жанр
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">аниме</button>
<button class="dropdown-item" type="button">детектив</button>
<button class="dropdown-item" type="button">мелодрама</button>
<button class="dropdown-item" type="button">комедия</button>
<button class="dropdown-item" type="button">мультфильм</button>
<button class="dropdown-item" type="button">приключения</button>
<button class="dropdown-item" type="button">триллер</button>
<button class="dropdown-item" type="button">ужасы</button>
<button class="dropdown-item" type="button">фантастика</button>
<button class="dropdown-item" type="button">фентези</button>
</div>
</div>
<div class="wrapper__nameGenere"></div>
<div class="form__sort">
<h2 class="form__title form__title-sort">Выберите направление:</h1>
<a href="" id="sort-serials" class="form__btn-serials btn-serials" data-sort="serials">Сериалы</a>
<a href="" id="sort-films" class="form__btn-films btn-films" data-sort="films">Фильмы</a>
</div>
<h2 class="form__title form__title-imageVideo">Выберите обложку</h2>
<input id="imageVideo" type="file" name="photo" multiple accept="image/jpeg,image/png">
<div class="wrapper__form__btn">
<button type="submit" class="btn btn-success btn-success-form">Добавить</button>
<button type="" class="btn btn-info btn-preview">Предпоказ</button>
</div>
<div class="error"></div>
</div>
<div class="wrapper__form__previewCardVideo">
<div class="wrapper__form__preview"></div>
</div>
</div>
</form>
