Last active
September 18, 2016 08:00
-
-
Save ronen-e/76870fe03fb7e6ec8538b7c5ded2672a to your computer and use it in GitHub Desktop.
Sample jQuery form validator
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
| (function ( $ ) { | |
| var invalidations = [ 'invalidRequiredField', 'invalidInput' ]; | |
| invalidations.invalidRequiredField = function invalidRequiredField(params) { | |
| return params.isRequiredField && !params.value; | |
| }; | |
| invalidations.invalidInput = function invalidInput(params) { | |
| var isRequiredField = params.isRequiredField, | |
| validator = params.inputValidator, | |
| type = params.type, | |
| value = params.value; | |
| return isRequiredField && validator.hasOwnProperty(type) && typeof validator[type] === 'function' && validator[type](value) === false; | |
| }; | |
| $.fn.formValidator = function formValidator(options) { | |
| var defaultConfig = { | |
| invalidations: formValidator.invalidations, // an array of method names residing on the array object itself. the methods should return true if the field value IS NOT valid | |
| inputValidator: {}, // key: type, value: validation function (used in invalidInput validation) returns true if field value IS valid | |
| onError: function() {}, // error callback | |
| onSuccess: function() {}, // success callback | |
| inputSelector: ':input', // selector for input fields in form elements | |
| breakOnError: true | |
| }; | |
| var config = $.extend(true, {}, defaultConfig, options); | |
| return this.each(function formValidatorMain() { | |
| var form = this; | |
| var $form = $(form); | |
| $form.submit(function formValidatorOnSubmit(event) { | |
| var errors = []; | |
| // get errors if any | |
| $form.find(config.inputSelector).each(function formValidatorValidateFields() { | |
| var invalidResults = validate(this); | |
| if (invalidResults.length) { | |
| errors = errors.concat(invalidResults); | |
| } | |
| }); | |
| if (errors.length > 0) { | |
| event.preventDefault(); | |
| config.onError.call(form, errors); | |
| } else { | |
| config.onSuccess.call(form); | |
| } | |
| }); | |
| }); | |
| function validate(input) { | |
| var $input = $(input), | |
| value = $input.val(), | |
| data = $input.data(), | |
| type = data.type, | |
| isRequiredField = !!data.required, | |
| result = { }, | |
| inputValidator = config.inputValidator, | |
| invalidations = config.invalidations, | |
| errorType, | |
| errors = []; | |
| var params = { inputValidator: inputValidator, input: input, value: value, data: data, type: type, isRequiredField: isRequiredField }; | |
| for (var i = 0; i < invalidations.length; i++) { | |
| errorType = invalidations[i]; | |
| var isInvalidMethod = invalidations[errorType]; | |
| var isInvalid = isInvalidMethod(params); | |
| if (isInvalid) { | |
| result = { errorType: errorType, type: type, input: input }; | |
| errors.push(result); | |
| } | |
| if (isInvalid && config.breakOnError) { | |
| break; | |
| } | |
| } | |
| return errors; | |
| } | |
| }; | |
| $.fn.formValidator.invalidations = invalidations; | |
| })(window.jQuery); |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Form Validator</title> | |
| </head> | |
| <body> | |
| <!-- | |
| Sample form: | |
| Name * : |________________| | |
| Surname : |________________| | |
| Phone * : |________________| | |
| Email * : |________________| | |
| Address : |________________| | |
| |_______OK_______| | |
| --> | |
| <form class="my-form"> | |
| <label>Name *</label> | |
| <input type="text" name="name" data-required="true" data-type="name"> | |
| <label>Surname</label> | |
| <input type="text" name="surname" data-type="name"> | |
| <label>Phone *</label> | |
| <input type="text" name="phone" data-required="true" data-type="phone"> | |
| <label>E-mail *</label> | |
| <input type="text" name="email" data-required="true" data-type="email"> | |
| <label>Address</label> | |
| <input type="text" name="address"> | |
| <button type="submit">Register</button> | |
| </form> | |
| <script src="https://code.jquery.com/jquery-2.0.3.js"></script> | |
| </body> | |
| </html> |
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
| .ready { | |
| font-weight: bold; | |
| } |
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
| // example usage | |
| function validateEmail(email) { | |
| return /.+@.+/.test(email); | |
| } | |
| $.fn.formValidator.invalidations.unshift('blacklisted'); | |
| $.fn.formValidator.invalidations.blacklisted = function(params) { | |
| var blacklisted = ['@blacklisted_1.com', '@blacklisted_2.com']; | |
| var isInvalid = false; | |
| if (params.type === 'email' && params.value) { | |
| blacklisted.forEach(function(b) { | |
| if (params.value.indexOf(b) > -1) { | |
| isInvalid = true; | |
| } | |
| }); | |
| } | |
| return isInvalid; | |
| } | |
| var formValidatorOptions = { | |
| inputValidator: { email: validateEmail }, | |
| onError: function(errors) { console.log('ERROR', errors); }, | |
| onSuccess: function() { console.log('SUCCESS'); }, | |
| breakOnError: false | |
| }; | |
| $('.my-form').formValidator(formValidatorOptions).addClass('ready'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment