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 Default = {
validate: false,
formGroup: {
required: false
},
@ -120,17 +121,19 @@ const BaseInput = (($) => {
this.removeIsEmpty()
}
// Validation events do not bubble, so they must be attached directly to the text: http://jsfiddle.net/PEpRM/1/
// 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.
let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity())
if (isValid) {
this.removeHasError()
} else {
this.addHasError()
if (this.config.validate) {
// Validation events do not bubble, so they must be attached directly to the text: http://jsfiddle.net/PEpRM/1/
// 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.
let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity())
if (isValid) {
this.removeHasError()
} else {
this.addHasError()
}
}
})
}

View File

@ -17,14 +17,21 @@ const BootstrapMaterialDesign = (($) => {
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
* - disable any component by defining it as false with an override. e.g. $.bootstrapMaterialDesign({ autofill: false })
*
* @see each individual component for more configuration settings.
*/
const Default = {
global: {
validate: false
},
ripples: {
selector: [
'.btn:not(.btn-link):not(.ripple-none)',
@ -107,6 +114,9 @@ const BootstrapMaterialDesign = (($) => {
// assemble the selector as it may be an array
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'
let jqueryFn = `mdb${component.charAt(0).toUpperCase() + component.slice(1)}`