pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cannot go to next new portfolio member page if form invalid

Browse Source
This commit is contained in:
dandds 2019-03-25 17:21:18 -04:00
parent 4987d24bef
commit ccaad6cbbc
4 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/components/forms/multi_step_modal_form.js
View File

@ -24,6 +24,7 @@ export default {
return { return {
step: 0, step: 0,
fields: {}, fields: {},
invalid: true,
} }
}, },
@ -37,26 +38,29 @@ export default {
methods: { methods: {
next: function() { next: function() {
if (this.isValid()) { if (this._checkIsValid()) {
this.step += 1 this.step += 1
} }
}, },
goToStep: function(step) { goToStep: function(step) {
if (this.isValid()) { if (this._checkIsValid()) {
this.step = step this.step = step
} }
}, },
handleValidChange: function(event) { handleValidChange: function(event) {
const { name, valid } = event const { name, valid } = event
this.fields[name] = valid this.fields[name] = valid
this._checkIsValid()
}, },
isValid: function() { _checkIsValid: function() {
return !Object.values(this.fields).some(field => field === false) const valid = !Object.values(this.fields).some(field => field === false)
this.invalid = !valid
return valid
}, },
handleFieldMount: function(event) { handleFieldMount: function(event) {
const { name, optional } = event const { name, optional } = event
this.fields[name] = optional this.fields[name] = optional
} },
}, },
computed: {}, computed: {},

10
js/components/text_input.js
View File

@ -63,11 +63,13 @@ export default {
this.value = conformToMask(this.value, mask).conformedValue this.value = conformToMask(this.value, mask).conformedValue
} }
} }
}, },
created: function() { created: function() {
this.$root.$emit('field-mount', { name: this.name, optional: this.optional }) this.$root.$emit('field-mount', {
name: this.name,
optional: this.optional,
})
}, },
methods: { methods: {
@ -88,7 +90,7 @@ export default {
}, },
onBlur: function(e) { onBlur: function(e) {
if (!(this.optional && e.target.value === "")) { if (!(this.optional && e.target.value === '')) {
this._checkIfValid({ value: e.target.value.trim(), invalidate: true }) this._checkIfValid({ value: e.target.value.trim(), invalidate: true })
} }
this.value = e.target.value.trim() this.value = e.target.value.trim()
@ -105,7 +107,7 @@ export default {
if (!this.modified && this.initialErrors && this.initialErrors.length) { if (!this.modified && this.initialErrors && this.initialErrors.length) {
valid = false valid = false
} else if (this.optional && value == "") { } else if (this.optional && value == '') {
valid = true valid = true
} }

5
styles/components/_modal.scss
View File

@ -203,6 +203,11 @@ body {
.usa-button { .usa-button {
margin-left: 2rem; margin-left: 2rem;
&[type='button']:disabled {
background-color: $color-gray-lighter;
opacity: inherit;
}
} }
.modal__form--padded { .modal__form--padded {

7
templates/portfolios/admin.html
View File

@ -92,7 +92,12 @@
</div> </div>
</div> </div>
<div class='action-group'> <div class='action-group'>
<a v-on:click="next()" class='action-group__action usa-button'>Next Step</a> <input
type='button'
v-on:click="next()"
v-bind:disabled="invalid"
class='action-group__action usa-button'
value='Next Step'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a> <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
</div> </div>
{% endset %} {% endset %}