Last active
September 8, 2020 00:22
-
-
Save juandopazo/5620611 to your computer and use it in GitHub Desktop.
Validator jQuery plugin
This file contains hidden or 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
| /* | |
| * jQuery plugin to validate forms around segurosdigitales | |
| * requires jquery validate plugin | |
| * */ | |
| (function($){ | |
| function Validator(options, element) { | |
| this.options = $.extend( {}, this.options, options ); | |
| this.elem = element; | |
| this.$elem = $(element); | |
| this.validateTheForm(); | |
| } | |
| $.extend(Validator.prototype, { | |
| // Set default options for jQuery validate plugin | |
| setValidationOptions: function(){ | |
| var self = this; | |
| // Default options for all forms around the app | |
| // These are the default options for jquery validate plugin | |
| var jQueryValidatePluginOptions = { | |
| onfocusout: function(e){ | |
| // Validate all elements when 'blur' event happens, except if it has a 'datepicker-open' class, I'm adding this class because datepicker causes that the input element loses focus and validation error is triggered | |
| if(!$(e).hasClass('datepicker-open')){ | |
| this.element(e); | |
| } | |
| }, | |
| errorElement: 'span', | |
| errorClass: 'error help-block', | |
| errorPlacement: function(error, element){ | |
| if(element.is('input[type="checkbox"]')){ | |
| error.insertAfter(element.parent()); | |
| } else { | |
| error.insertAfter(element); | |
| } | |
| }, | |
| // Highlight occurs when element has erros | |
| highlight: function(element, errorClass, validClass){ | |
| $(element).addClass(errorClass).removeClass(validClass); | |
| var control_group = $(element).closest('.control-group, .controls-row'); | |
| control_group.addClass(errorClass).removeClass(validClass); | |
| // Remove any valid icon | |
| control_group.find('i.icon-ok').remove(); | |
| }, | |
| // Unhighlight occurs when element is valid | |
| unhighlight: function(element, errorClass, validClass){ | |
| $(element).removeClass(errorClass).addClass(validClass); | |
| // get the parent of the field | |
| var control_group = $(element).closest('.control-group, .controls-row'); | |
| // is field empty? | |
| var element_is_empty = ( $(element).val() === '' ); | |
| if (!element_is_empty && !control_group.find('i.icon-ok').length) { | |
| var label = control_group.find('label'); | |
| // Prevent to add more than one icon if control group contains more than one label (ie. when we have checkboxes and radio buttons) | |
| $.each(label, function () { | |
| $(this).prepend('<i class="icon-ok green"></i>'); | |
| return false; | |
| }); | |
| // add class only if element is valid and not empty | |
| control_group.removeClass(errorClass).addClass(validClass); | |
| } | |
| } | |
| }; | |
| // add other options depending of validateForm plugin options | |
| if( self.options.errorMessages ){ | |
| jQueryValidatePluginOptions.messages = self.options.errorMessages; | |
| } | |
| if( self.options.rules ){ | |
| jQueryValidatePluginOptions.rules = self.options.rules; | |
| } | |
| if( self.options.showNotification ){ | |
| jQueryValidatePluginOptions.invalidHandler = function(event, validator){ | |
| var errors = validator.numberOfInvalids(); | |
| if(errors){ | |
| generateNotification('error', false, 'Por favor corrige los errores en los campos resaltados en rojo para poder continuar.'); | |
| } | |
| } | |
| } | |
| return jQueryValidatePluginOptions; | |
| }, | |
| options: { | |
| errorMessages: null, | |
| rules: null, | |
| showNotification: true | |
| }, | |
| // Validate form | |
| validateTheForm: function(){ | |
| var self = this; | |
| var validateOpts = self.setValidationOptions(); | |
| self.$elem.validate(validateOpts); | |
| } | |
| }; | |
| $.fn.validateForm = function (option) { | |
| return this.each(function () { | |
| var $this = $(this), | |
| data = $this.data('validator'); | |
| if (!data) $this.data('validator', (data = new Validator(options, this))) | |
| if (typeof option == 'string') data[option].call($this) | |
| }); | |
| }; | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment