Skip to content

Instantly share code, notes, and snippets.

@bichotll

bichotll/index.html

Created April 11, 2015 16:40
Show Gist options
  • Save bichotll/c52aba28fd85ca5487ac to your computer and use it in GitHub Desktop.
Save bichotll/c52aba28fd85ca5487ac to your computer and use it in GitHub Desktop.
Download ZIP
FormValidation // source http://jsbin.com/mikinu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FormValidation</title>
</head>
<body>
<form id="form" action="http://giphy.com/gifs/xnp2bUzXDhYnS">
<div>
<label for="name">First name</label>
<input id="name" name="name" type="text" data-pattern="[a-zA-Z]+" placeholder="Example: Alex">
</div>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="text" data-pattern="^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$" placeholder="Example: [email protected]">
</div>
<div>
<label for="card-number">Credit card number</label>
<input id="card-number" name="card-number" type="text" data-min="14" data-max="16" data-number="true">
</div>
<div>
<label for="security-code">Security code</label>
<input id="security-code" name="security-code" type="text" data-long="3" data-number="true">
</div>
<div>
<input type="submit">
</div>
</form>
<hr/>
<h1>To comment</h1>
<p>
I just wanted to show off more or less how I would handle a challenge like this one. <br/>
I've been thinking about it and the best way, instead of creating a personalized script, would be implementing a dynamic one.
<br/>
With this script I've created you can implement it everywhere.
</p>
<p>
There are several cool things we could do like...but I had another tests to do.
</p>
<ul>
<li>Default list of messages and personalized ones implementing data- properties on the inputs...or setting up them...</li>
<li>Implement a data-error for the inputs, true if error and then continue on the script.</li>
<li>Use $ to modify the DOM. Just wanted to show off my skills for this example.</li>
<li>Do it require.js friendly.</li>
<li>Implement bootstrap or some friendly style. It was not a requirement as far as I understood.</li>
<li>Tests. As it's a library we should tests the methods and possibilities.</li>
</ul>
<script src="src/form-validation.js" ></script>
<script src="src/index.js" ></script>
<script id="jsbin-javascript">
(function (context) {
'use strict';
/**
*Check the validation of a form and do so many fancy things
*@constructor
*/
var FormValidation = function (formElement) {
/**
* the form element
*/
this.form = formElement;
/**
* if valid
* @type {boolean}
*/
this.valid = true;
/**
* Validates the form and does fancy stuff
* @returns {boolean}
*/
this.validate = function () {
//reset
this.valid = true;
removeSpanAlerts(this.form);
//loop child elements
for (var i = 0; i < this.form.length; i++) {
checkChildValidation(this.form.elements[i]);
}
return this.valid;
};
/**
* Removes all the span errors of the form
* @param form formElement
* @private
*/
var removeSpanAlerts = function () {
var spanAlertElements = document.getElementsByClassName('form-validation-' + this.form.id + '-error-span');
while(spanAlertElements.length > 0){
spanAlertElements[0].parentNode.removeChild(spanAlertElements[0]);
}
}.bind(this);
/**
* Adds a span element to the form child
* @param element
* @param form
* @private
*/
var addChildSpanAlert = function (element) {
var spanAlert = document.createElement("SPAN");
var t = document.createTextNode("Please provide valid a input");
spanAlert.appendChild(t);
spanAlert.className = 'form-validation-' + this.form.id + '-error-span form-validation-error';
element.parentNode.appendChild(spanAlert);
}.bind(this);
/**
* Checks the child validation
* @param element
* @private
*/
var checkChildValidation = function (element) {
//check pattern
if (element.dataset.pattern && element.dataset.pattern !== '') {
var regex = new RegExp(element.dataset.pattern);
if (!regex.test(element.value)) {
this.valid = false;
addChildSpanAlert(element);
}
}
//check min n max
if (element.dataset.min && element.dataset.min !== '') {
if (element.value.length < +element.dataset.min) {
this.valid = false;
addChildSpanAlert(element);
}
if (element.dataset.max && element.dataset.max !== '') {
if (element.value.length > +element.dataset.max) {
this.valid = false;
addChildSpanAlert(element);
}
}
}
//check length
if (element.dataset.long && element.dataset.long !== '') {
if (element.value.length !== +element.dataset.long) {
this.valid = false;
addChildSpanAlert(element);
} else {
//check if number
if (element.dataset.number) {
if (isNaN(element.value)) {
this.valid = false;
addChildSpanAlert(element);
}
}
}
}
}.bind(this);
};
context.FormValidation = FormValidation;
})(this);
(function(){
//get form element
var form = document.getElementById('form');
var formValidation = new FormValidation(form);
//on submit check validation
form.onsubmit = function(e){
e.preventDefault();
//check
if (formValidation.validate(form)){
form.submit();
}
};
})();
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function (context) {
'use strict';
/**
*Check the validation of a form and do so many fancy things
*@constructor
*/
var FormValidation = function (formElement) {
/**
* the form element
*/
this.form = formElement;
/**
* if valid
* @type {boolean}
*/
this.valid = true;
/**
* Validates the form and does fancy stuff
* @returns {boolean}
*/
this.validate = function () {
//reset
this.valid = true;
removeSpanAlerts(this.form);
//loop child elements
for (var i = 0; i < this.form.length; i++) {
checkChildValidation(this.form.elements[i]);
}
return this.valid;
};
/**
* Removes all the span errors of the form
* @param form formElement
* @private
*/
var removeSpanAlerts = function () {
var spanAlertElements = document.getElementsByClassName('form-validation-' + this.form.id + '-error-span');
while(spanAlertElements.length > 0){
spanAlertElements[0].parentNode.removeChild(spanAlertElements[0]);
}
}.bind(this);
/**
* Adds a span element to the form child
* @param element
* @param form
* @private
*/
var addChildSpanAlert = function (element) {
var spanAlert = document.createElement("SPAN");
var t = document.createTextNode("Please provide valid a input");
spanAlert.appendChild(t);
spanAlert.className = 'form-validation-' + this.form.id + '-error-span form-validation-error';
element.parentNode.appendChild(spanAlert);
}.bind(this);
/**
* Checks the child validation
* @param element
* @private
*/
var checkChildValidation = function (element) {
//check pattern
if (element.dataset.pattern && element.dataset.pattern !== '') {
var regex = new RegExp(element.dataset.pattern);
if (!regex.test(element.value)) {
this.valid = false;
addChildSpanAlert(element);
}
}
//check min n max
if (element.dataset.min && element.dataset.min !== '') {
if (element.value.length < +element.dataset.min) {
this.valid = false;
addChildSpanAlert(element);
}
if (element.dataset.max && element.dataset.max !== '') {
if (element.value.length > +element.dataset.max) {
this.valid = false;
addChildSpanAlert(element);
}
}
}
//check length
if (element.dataset.long && element.dataset.long !== '') {
if (element.value.length !== +element.dataset.long) {
this.valid = false;
addChildSpanAlert(element);
} else {
//check if number
if (element.dataset.number) {
if (isNaN(element.value)) {
this.valid = false;
addChildSpanAlert(element);
}
}
}
}
}.bind(this);
};
context.FormValidation = FormValidation;
})(this);
(function(){
//get form element
var form = document.getElementById('form');
var formValidation = new FormValidation(form);
//on submit check validation
form.onsubmit = function(e){
e.preventDefault();
//check
if (formValidation.validate(form)){
form.submit();
}
};
})();</script></body>
</html>
Raw
jsbin.mikinu.js
(function (context) {
'use strict';
/**
*Check the validation of a form and do so many fancy things
*@constructor
*/
var FormValidation = function (formElement) {
/**
* the form element
*/
this.form = formElement;
/**
* if valid
* @type {boolean}
*/
this.valid = true;
/**
* Validates the form and does fancy stuff
* @returns {boolean}
*/
this.validate = function () {
//reset
this.valid = true;
removeSpanAlerts(this.form);
//loop child elements
for (var i = 0; i < this.form.length; i++) {
checkChildValidation(this.form.elements[i]);
}
return this.valid;
};
/**
* Removes all the span errors of the form
* @param form formElement
* @private
*/
var removeSpanAlerts = function () {
var spanAlertElements = document.getElementsByClassName('form-validation-' + this.form.id + '-error-span');
while(spanAlertElements.length > 0){
spanAlertElements[0].parentNode.removeChild(spanAlertElements[0]);
}
}.bind(this);
/**
* Adds a span element to the form child
* @param element
* @param form
* @private
*/
var addChildSpanAlert = function (element) {
var spanAlert = document.createElement("SPAN");
var t = document.createTextNode("Please provide valid a input");
spanAlert.appendChild(t);
spanAlert.className = 'form-validation-' + this.form.id + '-error-span form-validation-error';
element.parentNode.appendChild(spanAlert);
}.bind(this);
/**
* Checks the child validation
* @param element
* @private
*/
var checkChildValidation = function (element) {
//check pattern
if (element.dataset.pattern && element.dataset.pattern !== '') {
var regex = new RegExp(element.dataset.pattern);
if (!regex.test(element.value)) {
this.valid = false;
addChildSpanAlert(element);
}
}
//check min n max
if (element.dataset.min && element.dataset.min !== '') {
if (element.value.length < +element.dataset.min) {
this.valid = false;
addChildSpanAlert(element);
}
if (element.dataset.max && element.dataset.max !== '') {
if (element.value.length > +element.dataset.max) {
this.valid = false;
addChildSpanAlert(element);
}
}
}
//check length
if (element.dataset.long && element.dataset.long !== '') {
if (element.value.length !== +element.dataset.long) {
this.valid = false;
addChildSpanAlert(element);
} else {
//check if number
if (element.dataset.number) {
if (isNaN(element.value)) {
this.valid = false;
addChildSpanAlert(element);
}
}
}
}
}.bind(this);
};
context.FormValidation = FormValidation;
})(this);
(function(){
//get form element
var form = document.getElementById('form');
var formValidation = new FormValidation(form);
//on submit check validation
form.onsubmit = function(e){
e.preventDefault();
//check
if (formValidation.validate(form)){
form.submit();
}
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment