Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="container-fluid main-header">
<div class="row">
<h1>Валидация данных</h1>
</div>
</header>
<!-- Классы в Bootsrap 3 - http://getbootstrap.com/css/#forms-control-validation -->
<main class="container validator-container">
<div class="row">
<!-- Контейнер для email адреса -->
<div class="col-sm-6">
<div class="input-group center-block">
<label for="email">Ваш адрес электронной почты</label>
<input type="text" class="form-control" id="email" placeholder="example@email.com">
<span id="email-error-container" class="help-block">Введите адресс вашей электронной почты</span>
</div>
</div>
<!-- Контейнер для пароля -->
<div class="col-sm-6">
<div class="input-group center-block">
<label for="password">Ваш пароль</label>
<input type="password" class="form-control" id="password" placeholder="******">
<span id="password-error-container" class="help-block">Введите ваш пароль</span>
</div>
</div>
<!-- Контейнер для кнопки, при нажатие на которую будет происходить валидация -->
<div class="col-sm-12">
<button class="btn btn-default" id="validate" type="button">Провести валидацию</button>
</div>
</div>
</main>
<script src="validate.js"></script>
<script src="scripts.js"></script>
</body>
</html>
var onError = function() {
var parentNode = this.element.parentNode;
parentNode.classList.add('has-error');
parentNode.classList.remove('has-success');
parentNode.querySelector('.help-block').textContent = 'Ошибка: ' + this.message;
};
var onSuccess = function() {
var parentNode = this.element.parentNode;
parentNode.classList.add('has-success');
parentNode.classList.remove('has-error');
parentNode.querySelector('.help-block').textContent = 'Ура! Всё прошло хорошо, ваши данные полность валидные.';
};
.main-header {
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
padding-bottom: 1.5rem;
}
.validator-container {
margin-top: 2rem;
}
var Validator = (function() {
'use strict';
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment