I'm attempting to disable my form's submit button until valid data is entered for each of the controls.
After entering correct data for each of the fields, the submit button remains disabled.
Markup:
<div id="app">
<form action='#' method='POST'>
<div class="columns">
<div class="column">
<div class="field">
<div class="control">
<label class="label">Last Name</label>
<input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('lastname') }" class="input" name="lastname" type="text">
<span v-show="errors.has('lastname')" class="help is-danger">{{ errors.first('lastname') }}</span>
</div>
</div>
</div>
<div class="column">
<div class="field">
<div class="control">
<label class="label">Desk Number</label>
<input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('desknum') }" class="input" name="desknum" type="text">
<span v-show="errors.has('desknum')" class="help is-danger">{{ errors.first('desknum') }}</span>
</div>
</div>
</div>
</div>
<button :disabled='!isComplete' class="button is-link" name='submit_data' value='go'>Submit</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.9/vee-validate.min.js">
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
p_pat_name_first: null,
p_pat_name_last: null,
p_pat_date_birth: null,
p_pat_gender: null,
p_pat_twin: null,
p_emory_id: null,
p_mother_name_first: null,
p_mother_name_last: null,
p_parent_phone_primary: null,
};
},
computed: {
isComplete() {
return
this.p_pat_name_first &&
this.p_pat_name_last &&
this.p_pat_date_birth &&
this.p_pat_gender &&
this.p_pat_twin &&
this.p_mother_name_first &&
this.p_mother_name_last &&
this.p_parent_phone_primary;
}
}
});
</script>
What am I doing wrong that is not allowing the Submit button to enable itself when the form is complete and valid?
Well, simply put, your condition in isComplete() refers to values in your data that have no bearing on the form. None of the fields in your form have a v-model, so changing them has no effect on the variables referenced in inComplete().
The normal way in vee-validate to check if any fields are not valid is like this:
<button :disabled="errors.any()" type="submit">Submit</button>
That will only disable the Submit button after the form becomes invalid, so on page load it will look enabled until the user does something to the form that makes it invalid.
See a working example here (with one input having v-model set): https://jsfiddle.net/ryleyb/v7a2tzjp/8/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments