Skip to content

Instantly share code, notes, and snippets.

@HristoKolev

HristoKolev/index.html

Created November 10, 2016 04:46
Show Gist options
  • Save HristoKolev/962ecae8e04ebdf5c7c902c4c0badb22 to your computer and use it in GitHub Desktop.
Save HristoKolev/962ecae8e04ebdf5c7c902c4c0badb22 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootswatch/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="well form-wrapper center-block">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-lg-offset-2 col-lg-10">
<ul class="validation-messages" data-validation-for="inputEmail">
</ul>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
checked="">
Option one is this
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
package.json
{
"name": "Test-Form",
"version": "1.0.0",
"main": "index.js",
"author": "'HristoKolev'",
"license": "MIT",
"dependencies": {
"bootstrap": "^3.3.7",
"bootswatch": "^3.3.7",
"jquery": "^3.1.1"
}
}
Raw
script.js
$(function () {
'use strict';
var elementCache = {};
function getElement(selector) {
if (!elementCache[selector]) {
elementCache[selector] = $(selector);
}
return elementCache[selector];
}
function getFormGroup($element) {
if (!elementCache[$element]) {
elementCache[$element] = $element.parent().closest('.form-group');
}
return elementCache[$element];
}
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
function validateArguments($element, validators) {
if (!$element) {
throw new Error('The element is falsy.');
}
if (!validators) {
throw new Error('No validators specified.');
}
if (!Array.isArray(validators)) {
throw new Error('The validators argument is not an array');
}
for (var i = 0; i < validators.length; i += 1) {
var validator = validators[i];
if (!validator.test || !isFunction(validator.test)) {
throw new Error('The validator test is falsy or not a function.');
}
}
}
function getMessages(value, validators) {
var messages = [];
for (var i = 0; i < validators.length; i += 1) {
var validator = validators[i];
if (!validator.test(value)) {
messages.push(validator.message);
}
}
return messages;
}
function updateMessages($element, messages) {
var $messageContainer = getElement('[data-validation-for=' + $element.attr('id') + ']');
var $formGroup = getFormGroup($element);
var invalidClasses = 'has-error';
var validClasses = 'has-success';
var nativeElement = $element[0];
if (messages.length) {
var content = '';
for (var j = 0; j < messages.length; j += 1) {
content += '<li>' + messages[j] + '</li>';
}
$messageContainer.empty();
$messageContainer.append(content);
if (!nativeElement.isInvalid) {
$formGroup.addClass(invalidClasses);
$formGroup.removeClass(validClasses);
nativeElement.isInvalid = true;
}
}
else {
if (nativeElement.isInvalid) {
$messageContainer.empty();
$formGroup.addClass(validClasses);
$formGroup.removeClass(invalidClasses);
nativeElement.isInvalid = false;
}
}
}
function validateElement($element, validators) {
validateArguments($element, validators);
var messages = getMessages($element.val(), validators);
updateMessages($element, messages);
if (!messages.length) {
return true;
}
}
function enableValidation($element, validators) {
validateArguments($element, validators);
$element.on('input', function () {
validateElement($element, validators);
});
}
var validators = [
{
test: function (value) {
return value;
},
message: 'The value is required.'
},
{
test: function (value) {
return /[0-9]+/.test(value);
},
message: 'The value should be a number.'
}
];
enableValidation($('#inputEmail'), validators);
});
Raw
style.css
.form-wrapper {
max-width: 650px;
margin-top: 35px;
}
.validation-messages {
color: red;
margin-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment