Vee-validate: How to: disable submit button initially, while no errors are shown yet

[philippeluickx]

Versions:

• VueJs: 2.5.9
• Vee-Validate: 2.0.0-rc.27

Description:

Display a form with certain validation rules.
Good practice is to disable the submit button, so the user can not submit the form before all is good.
Another good practice is to not show all errors from the start, but allow the user to fill out the form first before displaying errors (using data-vv-delay is even better).

Steps To Reproduce:

Create a form including an input field with a "required" validation rule.
Unclear how to implement a submit button that is disabled until the input is filled in.

[logaretm]

You can use the flags to implement this:

http://vee-validate.logaretm.com/examples.html#flags-example

You could use the validated and valid flags combination to produce the desired result.

[philippeluickx]

Thanks for the pointer!

[DaleMckeown]

Does anyone have an example? New to Vue and VeeValidate, and finding a working example of this is proving difficult.

[DaleMckeown]

Doh. Spend ages searching, so ask a question, then find the answer almost immediatel after.

computed: { formValidated() { return Object.keys(this.fields).some(key => this.fields[key].validated) && Object.keys(this.fields).some(key => this.fields[key].valid); } }

[pkbarbiedoll]

@logaretm , the link you shared above with #flags-example is 404'ed.

[logaretm]

@pkbarbiedoll yea, the docs were updated a month ago:

https://baianat.github.io/vee-validate/guide/flags.html

[irvv17]

You can make a

isFormInvalid: function () {
                return this.errors.count() > 0 || !(Object.keys(this.fields).some(key => this.fields[key].dirty));
            }

Method

and then

 <button :class="['btn btn-primary btn-block',(isFormInvalid == true ? 'disabled' : '')]" type="submit">
                <i class="far fa-save"></i> Guardar
            </button>

that should be work

[PujanVR46]

cv

[anburocky3]

Docs Updated: http://vee-validate.logaretm.com/v2/guide/flags.html