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

[pimhooghiemstra]

@icebob I copied the code above for the submit button, but unfortunately this gives me an error.

If I check the Vue devtools, it doesn't seem there is a parent errors object?

Then I tried the disabled() function to just return true, thinking the button would be disabled on page load but that was not the case.

Maybe I am missing something?

[icebob]

Yes, there are some other bugs :) I'm doing a hotfix.

[icebob]

Done.

So, the first problem this is not the field instance, it is the vfg instance. So you have to use this.errors.length > 0.

Other problem, fieldSubmit hadn't disabled attribute, I fixed.
Last problem, there was no any CSS style for disabled button, fixed.

Firstly, run npm install icebob/vue-form-generator to update the last files.
Use this code in your schema:

{
	type: "submit",
	label: "",
	buttonText: "Submit form",
	onSubmit(model, schema) {
		alert("Form submitted!");
	},
	disabled() {
		return this.errors.length > 0;
	}
}

I hope it'll work for you.

[icebob]

@pimhooghiemstra Working?

[pimhooghiemstra]

@icebob I had a quick (maybe too quick) look last week and it did not work. However, I'll try again today and will post my results later today. Excuse me for the delay.

[pimhooghiemstra]

@icebob I had a more rigorous look and now it works indeed, thanks!

What took me by surprise is the fact that the styling of the disabled submit button is not different from the not-disabled version, this makes the button clickable even when disabled.

Maybe this would be better
`
fieldset.vue-form-generator .field-wrap input[type=submit]:disabled {

cursor: not-allowed;

opacity: 0.65;

}
`

Anyway, I am happy it works now

[icebob]

I added the same css style to form generator when fixed the issue: https://github.com/icebob/vue-form-generator/blob/master/src/formGenerator.vue#L405

I'm glad it is working. I will make a new beta release in a short time.

[icebob]

New beta released