В результате валидации формы добавляются классы к input
'ам. При нажатии на кнопку "Отправить" необходима проверка на наличие класса invalid
, которая выведет предупреждение, что не все поля прошли валидацию и запретит отправку данных в БД. Для проверки использую jQuery, но что-то идет не так.
Вот код проверки:
var button = document.getElementById("submit-btn");
var input = document.getElementsByTagName("input");
var form = document.getElementsByTagName("form");
$(button).on("click", ".btn", function(){
if ( $(input).hasClass("invalid")) {
$(form).before('<div class="alert alert-danger"><strong>Не-не!</strong> Не все обязательные поля заполнены. Перепроверь.</div>');
return false;
}
return true;
})
Но код не срабатывает, отправка происходит в любом случае.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Issues</title>
<link rel="stylesheet" href="validation.css">
</head>
<body>
<!-- HEADER -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">HELLO</a>
<ul class="nav navbar-nav">
<li><a href="#">Здесь обработка</a></li>
</ul>
</div>
</div>
</nav>
<!-- MAIN_PAGE -->
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="issue-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи номер заявки:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control" id="issue-id" placeholder="Enter ISSUE_ID" required>
</div>
</div>
<div class="form-group">
<label for="user-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи ID пользователя:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control" id="user-id" placeholder="Enter USER_ID" required>
</div>
</div>
<div class="form-group">
<label for="action" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Выбери действие:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select id="action" class="form-control" required>
<option>UPDATE</optiton>
</select>
</div>
</div>
<div class="form-group">
<label for="entity" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Выбери тип изменения:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select id="entity" class="form-control" required>
<option>Изменить дату начала действия связи</optiton>
<option>Изменить дату окончания действия связи</optiton>
<option>Сопоставить ссылки на подразделение</optiton>
</select>
</div>
</div>
<div class="form-group">
<label for="new-value" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи новое значение:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control" id="new-value" value="2154.12.31 00:00:01" required>
</div>
</div>
<div class="form-group">
<label for="entity" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label" >Выбери описание:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select id="entity" class="form-control" required>
<option>Изменение даты начала действия связи</optiton>
<option>Изменение даты окончания действия связи</optiton>
<option>Сопоставление ссылки на подразделение</optiton>
</select>
</div>
</div>
<div class="form-group">
<label for="user-org-unit-assignment-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи ID связи с подразделением:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control" id="user-org-unit-assignment-id" placeholder="Enter USER_ORG_UNIT_ASSIGNMENT_ID" required>
</div>
</div>
<div class="form-group">
<label for="organizational-unit-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи ID подразделения:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control" id="organizational-unit-id" placeholder="Enter ORGANIZATIONAL_UNIT_ID" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-8">
<button class="btn btn-info"><i class="fa fa-database" id="submit-btn"></i> Отправить</button>
</div>
</div>
</form>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/validations.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/196edbff68.js"></script>
</body>
</html>