Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="styles.css">
<header class="container-fluid main-header">
<div class="row">
<h1>Валидация данных</h1>
<!-- Классы в Bootsrap 3 - -->
<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="">
<span id="email-error-container" class="help-block">Введите адресс вашей электронной почты</span>
<!-- Контейнер для пароля -->
<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 class="col-sm-12">
<button class="btn btn-default" id="validate" type="button">Провести валидацию</button>
<script src="validate.js"></script>
<script src="scripts.js"></script>
var onError = function() {
var parentNode = this.element.parentNode;
parentNode.querySelector('.help-block').textContent = 'Ошибка: ' + this.message;
var onSuccess = function() {
var parentNode = this.element.parentNode;
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