diff --git a/js/components/options_input.js b/js/components/options_input.js index 03e868d0..d69e71d2 100644 --- a/js/components/options_input.js +++ b/js/components/options_input.js @@ -18,12 +18,17 @@ export default { default: false, }, optional: Boolean, + nullOption: { + type: String, + default: '' + } }, created: function() { emitEvent('field-mount', this, { optional: this.optional, name: this.name, + valid: this._isValid(this.value) }) }, @@ -41,13 +46,18 @@ export default { onInput: function(e) { this.showError = false this.showValid = true + this.value = e.target.value emitEvent('field-change', this, { value: e.target.value, name: this.name, watch: this.watch, - valid: this.showValid, + valid: this._isValid(e.target.value) }) }, + + _isValid: function(value) { + return this.optional || value !== this.nullOption + } }, } diff --git a/js/components/text_input.js b/js/components/text_input.js index 942ba68a..57cd8275 100644 --- a/js/components/text_input.js +++ b/js/components/text_input.js @@ -70,6 +70,7 @@ export default { emitEvent('field-mount', this, { optional: this.optional, name: this.name, + valid: this._isValid(this.value) }) }, @@ -103,15 +104,7 @@ export default { // _checkIfValid: function({ value, invalidate = false }) { - // Validate the value - let valid = this._validate(value) - - if (!this.modified && this.initialErrors && this.initialErrors.length) { - valid = false - } else if (this.optional && value === '') { - valid = true - } - + const valid = this._isValid(value) if (this.modified) { this.validationError = inputValidations[this.validation].validationError } @@ -144,5 +137,19 @@ export default { _validate: function(value) { return inputValidations[this.validation].match.test(this._rawValue(value)) }, + + _isValid: function(value) { + let valid = this._validate(value) + + if (!this.modified && this.initialErrors && this.initialErrors.length) { + valid = false + } else if (this.optional && value === '') { + valid = true + } else if (!this.optional && value === '') { + valid = false + } + + return valid + } }, } diff --git a/js/mixins/form.js b/js/mixins/form.js index d276213f..d4490708 100644 --- a/js/mixins/form.js +++ b/js/mixins/form.js @@ -25,8 +25,8 @@ export default { }, handleFieldMount: function(event) { - const { name, optional } = event - this.fields[name] = optional + const { name, optional, valid } = event + this.fields[name] = optional || valid }, validateForm: function() { diff --git a/templates/components/options_input.html b/templates/components/options_input.html index 8180c5c4..784fb9e8 100644 --- a/templates/components/options_input.html +++ b/templates/components/options_input.html @@ -10,6 +10,7 @@ key='{{ field.name }}' v-bind:watch='{{ watch | string | lower }}' v-bind:optional={{ optional|lower }} + v-bind:null-option="'{{ field.default }}'" >