Disable submit button

[pimhooghiemstra]

I am a bit stuck with the submit button of a form. I would like to disable the submit button when validation fails and enable it again once all fields pass validation.

However, according to the docs we can use the disabled property in the schema for any field and using it on a submit button adds a 'disabled' attribute to the HTML, but on the outer div.form-group. I expected it on the input[type=submit]...

My idea was to use the onValidated callback for an individual field to toggle this enabled/disabled state on the submit button.

Is something like this possible?

Here is a fiddle showing the issue: https://jsfiddle.net/pimhooghiemstra/0mg1v81e/207/

[icebob]

The disabled property can be function too.
Please try it:

{
              type:"submit",
              buttonText:"Click me to submit",
              onSubmit:this.submitForm,
              disabled() {
		return this.errors.length == 0;
   	     }
}

or this.$parent.errors.length ?!?!

[icebob]

Hmm, not working because the this not binded to the instance of field.

[icebob]

I will fix it in the next release.

[pimhooghiemstra]

Great! I have a workaround for the moment but it quickly becomes ugly i am afraid.

[icebob]

@pimhooghiemstra the solution & fix is coming with #129

[icebob]

If you updated, could you try this solution?

{
              type:"submit",
              buttonText:"Click me to submit",
              onSubmit:this.submitForm,
              disabled() {
		return this.$parent.errors.length != 0;
   	     }
}

[pimhooghiemstra]

I'll try this tomorrow