Prevent submitting the form if invalid

This commit is contained in:
George Drummond 2019-05-03 10:24:31 -04:00
parent 430a6493f0
commit 645c217fbe
No known key found for this signature in database
GPG Key ID: 296DD6077123BF17
2 changed files with 34 additions and 1 deletions

View File

@ -17,10 +17,37 @@ export default {
data: function() {
return {
selectedSection: this.initialSelectedSection,
invalid: true,
fields: {},
}
},
created: function() {
this.$root.$on('field-mount', this.handleFieldMount)
},
mounted: function() {
this.$root.$on('field-change', this.handleChange)
},
methods: {
handleFieldMount: function(event) {
const { name, optional } = event
this.fields[name] = optional
},
handleChange: function(event) {
const { name, valid, parent_uid } = event
this.fields[name] = valid
this.validateForm()
},
validateForm: function() {
const valid = !Object.values(this.fields).some(field => field === false)
this.invalid = !valid
return valid
},
toggleSection: function(sectionName) {
if (this.selectedSection === sectionName) {
this.selectedSection = null
@ -28,5 +55,11 @@ export default {
this.selectedSection = sectionName
}
},
handleSubmit: function(event) {
if (this.invalid) {
event.preventDefault()
}
},
},
}

View File

@ -108,7 +108,7 @@
{% call ToggleSection(section_name="edit") %}
<ul>
<li class="accordion-table__item__expanded">
<form action="{{ url_for('applications.update_environment', environment_id=env['id'], fragment='application-environments', _anchor='application-environments') }}" method="post">
<form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
{{ edit_form.csrf_token }}
{{ TextInput(edit_form.name, validation='requiredField') }}
{{