Created
October 31, 2014 12:44
-
-
Save devbyray/2632d4c8510bd9583529 to your computer and use it in GitHub Desktop.
jQuery inputValidation plugin (not finished yet)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
$.fn.inputValidation = function(method) { | |
var methods = { | |
init : function(options) { | |
this.inputValidation.settings = $.extend({}, this.inputValidation.errorMessage, options); | |
return this.each(function() { | |
var $element = $(this), // reference to the jQuery version of the current DOM element | |
element = this; // reference to the actual DOM element | |
}); | |
}, | |
// isRequired method to check if the input is not empty. | |
isRequired: function(message) { | |
console.log('message: ' + message); | |
if(!message || message === undefined) { | |
message = this.inputValidation.errorMessage.required; | |
console.log('message: ' + message); | |
} | |
$(this).focus(function() { | |
helpers.removeError($(this)); | |
helpers.removeError($(this)); | |
}); | |
$(this).blur( function() { | |
if($(this).val() === '') { | |
$(this).addClass('error'); | |
$(this).after('<p class="error error_message">'+message+'</p>').fadeIn('slow'); | |
} | |
}); | |
}, | |
// isNumber method to check if it is an number in the input field | |
isNumber: function(message) { | |
/** Default message **/ | |
if(!message || message === undefined) { | |
message = this.inputValidation.errorMessage.number; | |
console.log('message: ' + message); | |
} | |
$(this).focus(function() { | |
helpers.removeError($(this)); | |
}); | |
$(this).blur( function() { | |
var inputVal = $(this).val(); | |
if(inputVal && !$.isNumeric(inputVal)) { | |
$(this).addClass('error'); | |
$(this).after('<p class="error error_message">'+message+'</p>').fadeIn('slow'); | |
} else { | |
helpers.valid($(this)); | |
} | |
}); | |
}, | |
}; | |
var helpers = { | |
removeError: function(element) { | |
console.log('element: ', element); | |
// Remove error class from input and remove error message if input is focused | |
element.removeClass('error'); | |
element.removeClass('valid'); | |
element.next().remove(); | |
}, | |
valid: function(element) { | |
console.log('element: ', element); | |
// Remove error class from input and remove error message if input is focused | |
element.addClass('valid'); | |
}, | |
}; | |
if (methods[method]) { | |
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | |
} else if (typeof method === 'object' || !method) { | |
return methods.init.apply(this, arguments); | |
} else { | |
$.error( 'Method "' + method + '" does not exist in inputValidation plugin!'); | |
} | |
}; | |
$.fn.inputValidation.errorMessage = { | |
foo: 'googlasdnklansdl;as;ldle', | |
required: 'Dit veld is een verplicht', | |
number: 'Dit zij geen cijfers', | |
}; | |
$.fn.inputValidation.settings = {}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment