Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JQuery HTML5 - modified for dynamic forms
/*
* Html5 Form Plugin - jQuery plugin
* Version 1.5 / English
*
* Author: by Matias Mancini http://www.matiasmancini.com.ar
*
* Modified to be safe to call repeatedly on a form, useful for forms that change their fields dynamically.
*
* 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 : true
};
var opts = $.extend({}, defaults, options);
//Filter modern browsers
if(!opts.allBrowsers){
//exit if Webkit > 533
// MH: Disabling native validation because doesn't seem to be working in Safari 6
$.browser.chrome = $.browser.webkit && !!window.chrome;
if($.browser.webkit && parseInt($.browser.version) >= 533 && $.browser.chrome){
return false;
}
//exit if Firefox > 4
if($.browser.mozilla && parseInt($.browser.version) >= 2){
return false;
}
//exit if Opera > 11
if($.browser.opera && parseInt($.browser.version) >= 11){
return false;
}
}
//Private properties
var form = $(this);
var required = new Array();
var email = new Array();
//Setup color & placeholder function
function fillInput(input){
if(input.attr('placeholder') && input.attr('type') != 'password'){
input.val(input.attr('placeholder'));
input.css('color', opts.colorOff);
}else{
if(!input.data('value')){
if(input.val()!=''){
input.data('value', input.val());
}
}else{
input.val(input.data('value'));
}
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);
});
});
// window.console && console.log("Required list size: " + required.length);
//For each textarea & visible input excluding button, submit, radio, checkbox and select
$.each($(':input:visible:not(:button, :submit, :radio, :checkbox, select)', form), function(i) {
// window.console && console.log("Processing input " + i + " - " + $(this).attr('name'));
//Make array of required inputs
if(this.getAttribute('required')!=null){
// window.console && console.log(" Adding to required list");
required[i]=$(this);
}
//Make array of Email inputs
if(this.getAttribute('type')=='email'){
// window.console && console.log(" Adding to email list");
email[i]=$(this);
}
if (this.html5FormElement) {
// window.console && console.log(" Already an html5 form element, skipping field modification.");
return;
}
this.html5FormElement = true;
//Setting color & placeholder
fillInput($(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.value == $(this).attr('placeholder')){
if(this.getAttribute('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.value == ''){
fillInput($(this));
}
else{
if((this.getAttribute('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.value.length >= $(this).attr('maxlength')){
return false;
}
else{
return true;
}
});
}
});
});
$.each($('input:submit, input:image, input:button', this), function() {
/*
if (this.html5ListenerBound) {
window.console && console.log("Skipping submit button, already bound.");
return;
}
this.html5ListenerBound = true;
*/
var submitFunc = function(ev){
var emptyInput=null;
var emailError=null;
var input = $(':input:visible:not(:button, :submit, :radio, :checkbox, select)', form);
//Search for empty fields & value same as placeholder
//returns first input founded
//Add messages for multiple languages
// window.console && console.log("Submit check: Required list size: " + required.length);
$(required).each(function(key, value) {
if(value==undefined){
return true;
}
// window.console && console.log("Submit check: "+$(this).attr('name')+" input val: " + $(this).val());
if(($(this).val()==$(this).attr('placeholder')) || ($(this).val()=='')){
emptyInput=$(this);
if(opts.emptyMessage){
//Customized empty message
$(opts.responseDiv).html('<p>'+opts.emptyMessage+'</p>');
}
else if(opts.messages=='es'){
//Spanish empty message
$(opts.responseDiv).html('<p>El campo '+$(this).attr('title')+' es requerido.</p>');
}
else if(opts.messages=='en'){
//English empty message
$(opts.responseDiv).html('<p>The '+$(this).attr('title')+' field is required.</p>');
}
else if(opts.messages=='it'){
//Italian empty message
$(opts.responseDiv).html('<p>Il campo '+$(this).attr('title')+' &eacute; richiesto.</p>');
}
else if(opts.messages=='de'){
//German empty message
$(opts.responseDiv).html('<p>'+$(this).attr('title')+' ist ein Pflichtfeld.</p>');
}
else if(opts.messages=='fr'){
//Frech empty message
$(opts.responseDiv).html('<p>Le champ '+$(this).attr('title')+' est requis.</p>');
}
else if(opts.messages=='nl' || opts.messages=='be'){
//Dutch messages
$(opts.responseDiv).html('<p>'+$(this).attr('title')+' is een verplicht veld.</p>');
}
else if(opts.messages=='br'){
//Brazilian empty message
$(opts.responseDiv).html('<p>O campo '+$(this).attr('title')+' &eacute; obrigat&oacute;rio.</p>');
}
else if(opts.messages=='br'){
$(opts.responseDiv).html("<p>Insira um email v&aacute;lido por favor.</p>");
}
return false;
}
return emptyInput;
});
//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);
return false;
}
return emailError;
});
//Submit form ONLY if emptyInput & emailError are null
//if async property is set to false, skip ajax
if(!emptyInput && !emailError){
//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'));
$('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('<p>'+opts.emailMessage+'</p>');
}
else if(opts.messages=='es'){
$(opts.responseDiv).html('<p>Ingrese una direcci&oacute;n de correo v&aacute;lida por favor.</p>');
}
else if(opts.messages=='en'){
$(opts.responseDiv).html('<p>Please type a valid email address.</p>');
}
else if(opts.messages=='it'){
$(opts.responseDiv).html("<p>L'indirizzo e-mail non &eacute; valido.</p>");
}
else if(opts.messages=='de'){
$(opts.responseDiv).html("<p>Bitte eine g&uuml;ltige E-Mail-Adresse eintragen.</p>");
}
else if(opts.messages=='fr'){
$(opts.responseDiv).html("<p>Entrez une adresse email valide s&rsquo;il vous plait.</p>");
}
else if(opts.messages=='nl' || opts.messages=='be'){
$(opts.responseDiv).html('<p>Voert u alstublieft een geldig email adres in.</p>');
}
$(emailError).select();
}else{
alert('Unknown Error');
}
}
return false;
};
if (this.html5SubmitFunc) {
// window.console && console.log("Unbinding previous submit listener.");
$(this).unbind('click', this.html5SubmitFunc);
}
this.html5SubmitFunc = submitFunc;
$(this).bind('click', submitFunc);
});
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment