Skip to content

Instantly share code, notes, and snippets.

@fastcodecoq

fastcodecoq/README.markdown

Last active December 22, 2015 04:39
Show Gist options
  • Save fastcodecoq/6418407 to your computer and use it in GitHub Desktop.
Save fastcodecoq/6418407 to your computer and use it in GitHub Desktop.
Download ZIP
Validate forms jQuery Plugin
Raw
README.markdown

FORMS.JS Por Gomosöft

INTRODUCCIÓN

La forma de especificar que tipo de dato se debe validar en un campo especifico es, añadiendo el atributo data-type=* al elemento, de la sgte forma:

<input type="text" name="nombre" data-type="text-only" />

Para especificar si un campo es requerido o no, añadimos el atributo data-require, asi:

<input type="text" name="nombre" data-type="text-only" data-require/>

Si un campo no es requerido lo especificamos así:

<input type="text" name="nombre" data-type="text-only" data-require="no"/>

NOTA: Siempre es importante validar los campos en el lado del servidor

EJEMPLOS DE USO

Desde HTML

<!DOCTYPE html>
<html>
<!-- EJEMPLO DE USO DESDE HTML -->
<head>
   <title>uso de Forms.js</title> 
</head>

<body>

<form data-callback="callback" data-forms>
  <input type="text" name="nombre" data-type="text-only" data-require/>
  <input type="text" name="email" data-type="email" data-require="no"/>
  <input type="text" name="direccion" data-type="address" data-require="no"/>
  <textarea name="msg" data-require></textarea>
  <button>Enviar</button>
</form>


<script src="forms.min.js"></script>
<script>
    function callback(rs){ if(rs) alert("valido"); else alert("Debes rellenar correctamente los campos");} 
</script>
</body>

</html>

Desde Javascript

function callback(rs){

    if(rs)
       //el formulario es valido
    else
      //el formulario no es valido


 }


var opts = { live : true , error_class : "clase-campo-erroneo" } 


$("form").forms( opts, callback);

@params

Atributo data-type [String]

text [valida que contenga texto]
only-text [valida que solo contenga texto]
email
address
tel
credit-card
postal   [valida codigo postal]
password [mide si es seguro un password]
date [valida que una fecha sea valida ]

live [Bolean] true | false

error_class [String] nombre de la clase css que dará estilo a los campos invalidos.

DESCARGA

forms.min.js

forms.js

LICENCIA

Copyrights @gomosoft 2013

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
Raw
forms.js
/*
Copyrights @gomosoft 2013
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
(function(){
var form;
var vars = {
live : true,
error_class : "input-error"
};
var patterns = [
{name : "text" , pattern : "^\\w" , error_msg: "%field% no es un texto válido"},
{name :"only-text" , pattern : "^[a-zA-Z'ÁÉÍÓÚáéíóúñ'\",\.\\s+]{3,}$" , error_msg: "%field% no es un texto valido"},
{name : "email" , pattern: "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]{2,3})(\.[a-z]{2}\s)?$" , error_msg : "%field% no es un email valido"},
{name : "password" , pattern : "^[\\w]{6,}" , error_msg: "%field% no es un texto válido"},
{name : "tel" , pattern :"^[\+]?[0-9-]{7,12}$", error_msg: "%field% no es un correo valido" },
{name : "address" , pattern : "^([a-zA-Z0-9])[a-zA-Z0-9 ,-/#]*$", error_msg: "%field% no es una dirección valida"},
{name : "credit-card" , pattern : "^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$" , error_msg: "%field% no es una tarjeta de credito válida"},
{name : "postal" , pattern : "^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$" , error_msg: "%field% no es un código postal válido"},
{name: "date" , pattern : "#^(((0?[1-9]|1d|2[0-8]){[/-.]}(0?[1-9]|1[012])|(29|30){[/-.]}(0?[13456789]|1[012])|31{[/-.]}(0?[13578]|1[02])){[/-.]}(19|[2-9]d)d{2}|29{[/-.]}0?2{[/-.]}((19|[2-9]d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$#", error_msg: "%field% no es una fecha válida"}
];
$.fn.forms = function(varss, callback){
if(varss instanceof Function && !callback)
var callback = varss;
else if(varss instanceof Object){
$.extend(vars, varss);
if(vars.patterns){
$.extend(patterns, vars.patterns);
}
}
form = $(this);
if(vars.live)
live_validate();
controller(this,callback);
return this;
}
this.controller = function ( form , callback){
form.live("submit", function(e){
submit(e, callback);
});
form.find("input:not(input[type=\"submit\"], input[type=\"password\"], input[type=\"button\"]), textarea").focusout(function(){
$(this).val( trim($(this).val()) );
var field = $(this);
if(field.attr("data-type"))
var pat = new RegExp(get_pattern(field.attr("data-type")).pattern,"i");
else
var pat = new RegExp(get_pattern("text").pattern,"i");
if(field.attr("data-require") instanceof String)
if(field.attr("data-require") == "no" && strlen(field.val()) == 0)
field.removeClass(vars.error_class);
if( !pat.test(field.val()) )
{
field.addClass(vars.error_class);
}else
field.removeClass(vars.error_class);
});
this.submit = function(e, callback){
e.preventDefault();
e.stopPropagation();
if(!test_form()){
var target = form.find("." + vars.error_class + ":first");
$("body").animate({ "scrollTop" : (target.offset().top - 50) + "px" }, function(e){
target.focus();
});
callback(false);
}
else
callback(form);
return false;
}
this.test_form = function (){
var cond = new Array();
form.find("input:not(input[type=\"submit\"], input[type=\"button\"], input[type=\"password\"]), textarea").each(function(){
var field = $(this);
if(field.attr("data-require"))
if(field.attr("data-require") === "no" && strlen(field.val()) === 0)
{
field.removeClass(vars.error_class);
return true;
return;
}
console.log($(this));
if(field.attr("data-type"))
var regE = get_pattern(field.attr("data-type"));
else
var regE = get_pattern("text");
console.log(regE)
if(!regE)
cond.push("false");
else
regE = regE.pattern;
var pat = new RegExp(regE,"i");
if( !pat.test( field.val()) )
{
field.addClass(vars.error_class);
cond.push("false");
}else
field.removeClass(vars.error_class);
});
if($.inArray("false", cond) != -1)
return false;
else
return true;
}
}
this.chk_input = function (){
var field = $(this);
if(field.attr("data-type"))
var regE = get_pattern(field.attr("data-type"));
else
var regE = get_pattern("text");
console.log(regE)
if(regE)
regE = regE.pattern;
else
return false;
var pat = new RegExp(regE,"i");
if(field.attr("data-require"))
if(field.attr("data-require") == "no" && field.val().split("").length == 0){
field.removeClass(vars.error_class);
return true;
}
if( !pat.test(field.val()) )
{
field.addClass(vars.error_class);
}else
field.removeClass(vars.error_class);
}
this.live_validate = function (){
form.find("input[type='text'], textarea").live("keyup", chk_input);
}
this.get_pattern = function (type){
for(x in patterns)
if(type === patterns[x].name)
return patterns[x]
}
}(jQuery));
if(!$)
{
console.log("jQuery is require");
}else{
$("[data-forms]").each(function(){
$(this).form({live:true}, $(this).attr("data-callback"));
});
}
// ----------------------------- forms api
// patterns util --------------------------
function strlen (string) {
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Sakimori
// + input by: Kirk Strobeck
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// + revised by: Brett Zamir (http://brett-zamir.me)
// % note 1: May look like overkill, but in order to be truly faithful to handling all Unicode
// % note 1: characters and to this function in PHP which does not count the number of bytes
// % note 1: but counts the number of characters, something like this is really necessary.
// * example 1: strlen('Kevin van Zonneveld');
// * returns 1: 19
// * example 2: strlen('A\ud87e\udc04Z');
// * returns 2: 3
var str = string + '';
var i = 0,
chr = '',
lgth = 0;
if (!this.php_js || !this.php_js.ini || !this.php_js.ini['unicode.semantics'] || this.php_js.ini['unicode.semantics'].local_value.toLowerCase() !== 'on') {
return string.length;
}
var getWholeChar = function (str, i) {
var code = str.charCodeAt(i);
var next = '',
prev = '';
if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F to treat high private surrogates as single characters)
if (str.length <= (i + 1)) {
throw 'High surrogate without following low surrogate';
}
next = str.charCodeAt(i + 1);
if (0xDC00 > next || next > 0xDFFF) {
throw 'High surrogate without following low surrogate';
}
return str.charAt(i) + str.charAt(i + 1);
} else if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate
if (i === 0) {
throw 'Low surrogate without preceding high surrogate';
}
prev = str.charCodeAt(i - 1);
if (0xD800 > prev || prev > 0xDBFF) { //(could change last hex to 0xDB7F to treat high private surrogates as single characters)
throw 'Low surrogate without preceding high surrogate';
}
return false; // We can pass over low surrogates now as the second component in a pair which we have already processed
}
return str.charAt(i);
};
for (i = 0, lgth = 0; i < str.length; i++) {
if ((chr = getWholeChar(str, i)) === false) {
continue;
} // Adapt this line at the top of any loop, passing in the whole string and the current iteration and returning a variable to represent the individual character; purpose is to treat the first part of a surrogate pair as the whole character and then ignore the second part
lgth++;
}
return lgth;
}
function trim (str, charlist) {
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: mdsjack (http://www.mdsjack.bo.it)
// + improved by: Alexander Ermolaev (http://snippets.dzone.com/user/AlexanderErmolaev)
// + input by: Erkekjetter
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + input by: DxGx
// + improved by: Steven Levithan (http://blog.stevenlevithan.com)
// + tweaked by: Jack
// + bugfixed by: Onno Marsman
// * example 1: trim(' Kevin van Zonneveld ');
// * returns 1: 'Kevin van Zonneveld'
// * example 2: trim('Hello World', 'Hdle');
// * returns 2: 'o Wor'
// * example 3: trim(16, 1);
// * returns 3: 6
var whitespace, l = 0,
i = 0;
str += '';
if (!charlist) {
// default list
whitespace = " \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000";
} else {
// preg_quote custom list
charlist += '';
whitespace = charlist.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '$1');
}
l = str.length;
for (i = 0; i < l; i++) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(i);
break;
}
}
l = str.length;
for (i = l - 1; i >= 0; i--) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(0, i + 1);
break;
}
}
return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
}
Raw
forms.min.js
/*
Copyrights @gomosoft 2013
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
(function(){var b;var c={live:true,error_class:"input-error"};var a=[{name:"text",pattern:"^\\w",error_msg:"%field% no es un texto válido"},{name:"only-text",pattern:"^[a-zA-Z'ÁÉÍÓÚáéíóúñ'\",.\\s+]{3,}$",error_msg:"%field% no es un texto valido"},{name:"email",pattern:"^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]{2,3})(.[a-z]{2}s)?$",error_msg:"%field% no es un email valido"},{name:"password",pattern:"^[\\w]{6,}",error_msg:"%field% no es un texto válido"},{name:"tel",pattern:"^[+]?[0-9-]{7,12}$",error_msg:"%field% no es un correo valido"},{name:"address",pattern:"^([a-zA-Z0-9])[a-zA-Z0-9 ,-/#]*$",error_msg:"%field% no es una dirección valida"},{name:"credit-card",pattern:"^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?s?\d{4}){3}|(3[4,7]) d{2}-?s?\d{6}-?s?\d{5}$",error_msg:"%field% no es una tarjeta de credito válida"},{name:"postal",pattern:"^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$",error_msg:"%field% no es un código postal válido"},{name:"date",pattern:"#^(((0?[1-9]|1d|2[0-8]){[/-.]}(0?[1-9]|1[012])|(29|30){[/-.]}(0?[13456789]|1[012])|31{[/-.]}(0?[13578]|1[02])){[/-.]}(19|[2-9]d)d{2}|29{[/-.]}0?2{[/-.]}((19|[2-9]d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$#",error_msg:"%field% no es una fecha válida"}];$.fn.forms=function(d,e){if(d instanceof Function&&!e){var e=d}else{if(d instanceof Object){$.extend(c,d);if(c.patterns){$.extend(a,c.patterns)}}}b=$(this);if(c.live){live_validate()}controller(this,e);return this};this.controller=function(d,e){d.live("submit",function(f){submit(f,e)});d.find('input:not(input[type="submit"], input[type="password"], input[type="button"]), textarea').focusout(function(){$(this).val(trim($(this).val()));var g=$(this);if(g.attr("data-type")){var f=new RegExp(get_pattern(g.attr("data-type")).pattern,"i")}else{var f=new RegExp(get_pattern("text").pattern,"i")}if(g.attr("data-require") instanceof String){if(g.attr("data-require")=="no"&&strlen(g.val())==0){g.removeClass(c.error_class)}}if(!f.test(g.val())){g.addClass(c.error_class)}else{g.removeClass(c.error_class)}});this.submit=function(g,h){g.preventDefault();g.stopPropagation();if(!test_form()){var f=d.find("."+c.error_class+":first");$("body").animate({scrollTop:(f.offset().top-50)+"px"},function(i){f.focus()});h(false)}else{h(d)}return false};this.test_form=function(){var f=new Array();d.find('input:not(input[type="submit"], input[type="button"], input[type="password"]), textarea').each(function(){var i=$(this);if(i.attr("data-require")){if(i.attr("data-require")==="no"&&strlen(i.val())===0){i.removeClass(c.error_class);return true;return}}console.log($(this));if(i.attr("data-type")){var h=get_pattern(i.attr("data-type"))}else{var h=get_pattern("text")}console.log(h);if(!h){f.push("false")}else{h=h.pattern}var g=new RegExp(h,"i");if(!g.test(i.val())){i.addClass(c.error_class);f.push("false")}else{i.removeClass(c.error_class)}});if($.inArray("false",f)!=-1){return false}else{return true}}};this.chk_input=function(){var f=$(this);if(f.attr("data-type")){var e=get_pattern(f.attr("data-type"))}else{var e=get_pattern("text")}console.log(e);if(e){e=e.pattern}else{return false}var d=new RegExp(e,"i");if(f.attr("data-require")){if(f.attr("data-require")=="no"&&f.val().split("").length==0){f.removeClass(c.error_class);return true}}if(!d.test(f.val())){f.addClass(c.error_class)}else{f.removeClass(c.error_class)}};this.live_validate=function(){b.find("input[type='text'], textarea").live("keyup",chk_input)};this.get_pattern=function(d){for(x in a){if(d===a[x].name){return a[x]}}}}(jQuery));if(!$){console.log("jQuery is require")}else{$("[data-forms]").each(function(){$(this).form({live:true},$(this).attr("data-callback"))})}function strlen(a){var f=a+"";var b=0,c="",d=0;if(!this.php_js||!this.php_js.ini||!this.php_js.ini["unicode.semantics"]||this.php_js.ini["unicode.semantics"].local_value.toLowerCase()!=="on"){return a.length}var e=function(l,g){var k=l.charCodeAt(g);var h="",j="";if(55296<=k&&k<=56319){if(l.length<=(g+1)){throw"High surrogate without following low surrogate"}h=l.charCodeAt(g+1);if(56320>h||h>57343){throw"High surrogate without following low surrogate"}return l.charAt(g)+l.charAt(g+1)}else{if(56320<=k&&k<=57343){if(g===0){throw"Low surrogate without preceding high surrogate"}j=l.charCodeAt(g-1);if(55296>j||j>56319){throw"Low surrogate without preceding high surrogate"}return false}}return l.charAt(g)};for(b=0,d=0;b<f.length;b++){if((c=e(f,b))===false){continue}d++}return d}function trim(e,d){var b,a=0,c=0;e+="";if(!d){b=" \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000"}else{d+="";b=d.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g,"$1")}a=e.length;for(c=0;c<a;c++){if(b.indexOf(e.charAt(c))===-1){e=e.substring(c);break}}a=e.length;for(c=a-1;c>=0;c--){if(b.indexOf(e.charAt(c))===-1){e=e.substring(0,c+1);break}}return b.indexOf(e.charAt(0))===-1?e:""};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment