made validation optional, and off by default.

This commit is contained in:
Kevin Ross 2015-12-07 18:07:21 -06:00
parent 1c747cf86d
commit 63f55858a4
2 changed files with 25 additions and 12 deletions

View File

@ -3,6 +3,7 @@ import Util from './util'
const BaseInput = (($) => { const BaseInput = (($) => {
const Default = { const Default = {
validate: false,
formGroup: { formGroup: {
required: false required: false
}, },
@ -120,17 +121,19 @@ const BaseInput = (($) => {
this.removeIsEmpty() this.removeIsEmpty()
} }
// Validation events do not bubble, so they must be attached directly to the text: http://jsfiddle.net/PEpRM/1/ if (this.config.validate) {
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter // Validation events do not bubble, so they must be attached directly to the text: http://jsfiddle.net/PEpRM/1/
// the form-group on change. // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
// // the form-group on change.
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code. //
// BUT, I've left it here for backwards compatibility. // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity()) // BUT, I've left it here for backwards compatibility.
if (isValid) { let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity())
this.removeHasError() if (isValid) {
} else { this.removeHasError()
this.addHasError() } else {
this.addHasError()
}
} }
}) })
} }

View File

@ -17,14 +17,21 @@ const BootstrapMaterialDesign = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME] const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
/** /**
* Global configuration:
* The global configuration hash will be mixed in to each components' config.
* e.g. calling $.bootstrapMaterialDesign({global: { validate: true } }) would pass `validate:true` to every component
* *
* Default macro configuration for each component (primarily selectors). *
* Component configuration:
* - selector: may be a string or an array. Any array will be joined with a comma to generate the selector * - selector: may be a string or an array. Any array will be joined with a comma to generate the selector
* - disable any component by defining it as false with an override. e.g. $.bootstrapMaterialDesign({ autofill: false }) * - disable any component by defining it as false with an override. e.g. $.bootstrapMaterialDesign({ autofill: false })
* *
* @see each individual component for more configuration settings. * @see each individual component for more configuration settings.
*/ */
const Default = { const Default = {
global: {
validate: false
},
ripples: { ripples: {
selector: [ selector: [
'.btn:not(.btn-link):not(.ripple-none)', '.btn:not(.btn-link):not(.ripple-none)',
@ -107,6 +114,9 @@ const BootstrapMaterialDesign = (($) => {
// assemble the selector as it may be an array // assemble the selector as it may be an array
let selector = this._resolveSelector(componentConfig) let selector = this._resolveSelector(componentConfig)
// mix in global options
componentConfig = $.extend({}, this.config.global, componentConfig)
// create the jquery fn name e.g. 'mdbText' for 'text' // create the jquery fn name e.g. 'mdbText' for 'text'
let jqueryFn = `mdb${component.charAt(0).toUpperCase() + component.slice(1)}` let jqueryFn = `mdb${component.charAt(0).toUpperCase() + component.slice(1)}`