Можно сделать прибегая к возможностям HTML5
Функция валидации jQuery (Передаете в функцию объект всей формы, например $('#form')):
let validation = form => {
let fields = form.find('input, select'), // какие типы полей проверять
check = []; // объявляем массив для хранения результатов перебора
$.each(fields, (_, item) => { // перебираем все поля
if ($(item).is(':required') && !$(item).is(':disabled')) { // проверяем только поля с required (обязательные) и не проверяем выключенные поля disabled
check.push(item.checkValidity()); // записываем в массив полученные результаты
}
});
form.addClass('was-validated'); // добавляем класс форме что все поля валидны
let isValid = item => item === true;
if (check.every(isValid)) { // проверяем каждое значение на true
form.removeClass('was-validated'); // если какое то поле не true удаляем общий класс формы, тогда у нас форма отобразит поле с невалидным значением
}
return check.every(isValid); // возвращаем ответ true tckb все поля валидны и false если хотя бы одно обязательное поле не валидно
};
в теге формы прописываем:
<form novalidate id="form">
Для отображения полей с ошибкой используем CSS:
.was-validated .field-class:valid {
border-color: green;
}
.field-class:invalid {
border-color: red;
}
Средний