/*
* Html5 Form Plugin - jQuery plugin
* HTML5 form Validation form Internet Explorer & Firefox
* Version 1.2 / English
*
* written by Matias Mancini http://www.matiasmancini.com.ar
*
* Copyright (c) 2010 Matias Mancini (http://www.matiasmancini.com.ar)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
(function($){
$.fn.html5form = function(options){
$(this).each(function(){
//default configuration properties
var defaults = {
async : true,
method : $(this).attr('method'),
responseDiv : null,
labels : 'show',
colorOn : '#000000',
colorOff : '#a1a1a1',
action : $(this).attr('action'),
messages : false,
emptyMessage : false,
emailMessage : false,
allBrowsers : false
};
var opts = $.extend({}, defaults, options);
//Filters latest WebKit versions & Firefox 4
if(!opts.allBrowsers){
//exit if webkit +533
if($.browser.webkit && parseInt($.browser.version)>=533){
return false;
}
//exit if firefox 4
if($.browser.mozilla && parseInt($.browser.version)>=2){
return false;
}
}
//Private properties
var form = $(this);
var required = new Array();
var email = new Array();
var select = new Array();
//Setup color & placeholder function
function fillInput(input){
if(input.attr('placeholder') && input.attr('type')!='password' && input.val()==''){
input.val(input.attr('placeholder'));
input.css('color', opts.colorOff);
if($.browser.mozilla){
input.css('-moz-box-shadow', 'none');
}
}else{
if(!input.data('value')){
if(input.val()!=''){
input.data('value', input.val());
}
}else{
input.val(input.data('value'));
}
if(input.val()==input.attr('placeholder')){
input.css('color', opts.colorOff);
}else{
input.css('color', opts.colorOn);
}
}
}
//Label hiding (if required)
if(opts.labels=='hide'){
$(this).find('label').hide();
}
//Select event handler (just colors)
$.each($('select', this), function(){
$(this).css('color', opts.colorOff);
$(this).change(function(){
$(this).css('color', opts.colorOn);
});
});
//For each textarea & visible input excluding button, submit, radio, checkbox and select
$.each($(':input:visible:not(:button, :submit, :radio, :checkbox)', form), function(i) {
//Setting color & placeholder
fillInput($(this));
//Make array of required inputs
if($(this).attr('required')!=null && $(this).attr('disabled')==null){
required[i]=$(this);
}
//Make array of Email inputs
if($(this).attr('type')=='email' && $(this).attr('disabled')==null){
// $('.registro .titular').text(toString($(this).attr('disabled')));
email[i]=$(this);
}
//FOCUS event attach
//If input value == placeholder attribute will clear the field
//If input type == url will not
//In both cases will change the color with colorOn property
$(this).bind('focus', function(ev){
ev.preventDefault();
if($(this).val() == $(this).attr('placeholder')){
if($(this).attr('type')!='url'){
$(this).attr('value', '');
}
}
$(this).css('color', opts.colorOn);
});
//BLUR event attach
//If input value == empty calls fillInput fn
//if input type == url and value == placeholder attribute calls fn too
$(this).bind('blur', function(ev){
ev.preventDefault();
if($(this).val() == ''){
fillInput($(this));
}
else{
if(($(this).attr('type')=='url') && ($(this).val()==$(this).attr('placeholder'))){
fillInput($(this));
}
}
});
//Limits content typing to TEXTAREA type fields according to attribute maxlength
$('textarea').filter(this).each(function(){
if($(this).attr('maxlength')>0){
$(this).keypress(function(ev){
var cc = ev.charCode || ev.keyCode;
if(cc == 37 || cc == 39) {
return true;
}
if(cc == 8 || cc == 46) {
return true;
}
if($(this).val().length >= $(this).attr('maxlength')){
return false;
}
else{
return true;
}
});
}
});
});
$.each($('select', form), function(i) {
//Make array of required inputs
if($(this).attr('required')!=null && $(this).attr('disabled')==null){
select[i]=$(this);
}
$(this).unbind('focus');
$(this).unbind('blur');
// $(this).bind('focus', function(){
//// if(this.value == $(this).attr('placeholder')){
//// $(this).attr('value', '');
//// }
// $(this).css('color', opts.colorOn);
// });
//
//
// $(this).bind('blur', function(){
// if(this.value == ''){
// fillInput($(this));
// }
// });
});
$.each($(':submit', this), function() {
$(this).bind('click', function(ev){
var emptyInput=null;
var emailError=null;
var selectError=null;
var input = $(':input:visible:not(:button, :submit, :radio, :checkbox)', form);
//Search for empty fields & value same as placeholder
//returns first input founded
//Add messages for multiple languages
$(required).each(function(key, value) {
if(value==undefined){
return true;
}
if(($(this).val()==$(this).attr('placeholder')) || ($(this).val()=='')){
emptyInput=$(this);
$(this).css('box-shadow', '#f00 0 0 1.5px 1px').addClass('select-background');
if(opts.emptyMessage){
//Customized empty message
$(opts.responseDiv).html(''+opts.emptyMessage+'
');
}
else if(opts.messages=='es'){
//Spanish empty message
$(opts.responseDiv).html('El campo '+$(this).attr('title')+' es requerido.
');
}
else if(opts.messages=='en'){
//English empty message
$(opts.responseDiv).html('The '+$(this).attr('title')+' field is required.
');
}
else if(opts.messages=='it'){
//Italian empty message
$(opts.responseDiv).html('Il campo '+$(this).attr('title')+' é richiesto.
');
}
else if(opts.messages=='de'){
//German empty message
$(opts.responseDiv).html(''+$(this).attr('title')+' ist ein Pflichtfeld.
');
}
else if(opts.messages=='fr'){
//Frech empty message
$(opts.responseDiv).html('Le champ '+$(this).attr('title')+' est requis.
');
}
else if(opts.messages=='nl' || opts.messages=='be'){
//Dutch messages
$(opts.responseDiv).html(''+$(this).attr('title')+' is een verplicht veld.
');
}
return false;
}else{
$(this).css('box-shadow', 'none').removeClass('select-background');
}
return emptyInput;
});
$(select).each(function(key, value) {
if(value==undefined){
return true;
}
if(($(this).val()==$(this).attr('placeholder')) || ($(this).val()=='')){
selectError=$(this);
$(this).css('box-shadow', '#f00 0 0 1.5px 1px').addClass('select-background');
return false;
}else{
$(this).css('box-shadow', 'none').removeClass('select-background');
}
return selectError;
});
//check email type inputs with regular expression
//return first input founded
$(email).each(function(key, value) {
if(value==undefined){
return true;
}
if($(this).val().search(/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/i)){
emailError=$(this);
$(this).css('box-shadow', '#f00 0 0 1.5px 1px').addClass('select-background');
return false;
}else{
$(this).css('box-shadow', 'none').removeClass('select-background');
}
return emailError;
});
//Submit form ONLY if emptyInput & emailError are null
//if async property is set to false, skip ajax
if(!emptyInput && !emailError && !selectError){
// if(priv && !jQuery('form#datos #privacidad').is(':checked')){
// alert('Debe aceptar la política de privacidad');
// return false;
// }
//Clear all empty value fields before Submit
$(input).each(function(){
if($(this).val()==$(this).attr('placeholder')){
$(this).val('');
}
});
//Submit data by Ajax
if(opts.async){
var formData=$(form).serialize();
$.ajax({
url : opts.action,
type : opts.method,
data : formData,
success : function(data){
if(opts.responseDiv){
$(opts.responseDiv).html(data);
}
//Reset form
$(input).val('');
$.each(form[0], function(){
fillInput($(this).not(':hidden, :button, :submit, :radio, :checkbox'));
$('select', form).each(function(){
$(this).css('color', opts.colorOff);
$(this).children('option:eq(0)').attr('selected', 'selected');
});
$(':radio, :checkbox', form).removeAttr('checked');
});
}
});
}
else{
$(form).submit();
}
}else{
if(emptyInput){
$(emptyInput).focus().select();
}
else if(emailError){
//Customized email error messages (Spanish, English, Italian, German, French, Dutch)
if(opts.emailMessage){
$(opts.responseDiv).html(''+opts.emailMessage+'
');
}
else if(opts.messages=='es'){
$(opts.responseDiv).html('Ingrese una dirección de correo válida por favor.
');
}
else if(opts.messages=='en'){
$(opts.responseDiv).html('Please type a valid email address.
');
}
else if(opts.messages=='it'){
$(opts.responseDiv).html("L'indirizzo e-mail non é valido.
");
}
else if(opts.messages=='de'){
$(opts.responseDiv).html("Bitte eine gültige E-Mail-Adresse eintragen.
");
}
else if(opts.messages=='fr'){
$(opts.responseDiv).html("Entrez une adresse email valide s’il vous plait.
");
}
else if(opts.messages=='nl' || opts.messages=='be'){
$(opts.responseDiv).html('Voert u alstublieft een geldig email adres in.
');
}
$(emailError).select();
}else{
//alert('Unknown Error');
}
}
return false;
});
});
});
}
})(jQuery);