Disabled submit button, but valid form data will not enable it (vee-validate)

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:













Last Name

{{ errors.first('lastname') }}

</div>
</div>




Desk Number

{{ errors.first('desknum') }}

</div>
</div>
</div>

<button :disabled='!isComplete' class="button is-link" name='submit_data' value='go'>Submit</button>
</form>
</div>

https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css

Fiddle

What am I doing wrong that is not allowing the Submit button to enable itself when the form is complete and valid?

1 Answer
1

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().

isComplete()

v-model

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/

This works very nicely thanks. Can I ask what the v-model acomplishes?
– a coder
Jun 22 at 16:02

v-model links your data elements to the input field. So in my fiddle, whatever you type in the last name input magically becomes the value in p_pat_name_last - you can check by adding a console.log(this.p_pat_name_last) in the doSubmit method, or anywhere in the html add {{p_pat_name_last}}
– Ryley
Jun 22 at 16:04

p_pat_name_last

console.log(this.p_pat_name_last)

{{p_pat_name_last}}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.