FormKit Plugin to Keep submit button disabled until a form changes

[PizzaConsole]

Hi all, I would like to make a plugin that is similar to this Example except have it run on every form on my app and use the build in submit action button. Is this possible?

My quick implemetation

import { FormKitNode, FormKitPlugin } from '@formkit/core';

let submitNode: FormKitNode | null = null;

const checkChangesPlugin: FormKitPlugin = (node) => {
	if (node.props.type === 'submit') {
		submitNode = node;
		submitNode.props.disabled = true;
	}

	if (node.props.type === 'form') {
		if (node.context) {
			watch(node.context.state, (val) => {
				if (val && submitNode) {
					submitNode.props.disabled = node.context?.state.dirty ? false : true;
				}
			});
		}
	}
};

export default checkChangesPlugin;

[CavalcanteLeo]

Just bear in mind that’s not a good UX practice, it’s better to keep it enabled and the user can try to submit and see the errors.. otherwise the user can spend quite a lot of time just trying to find the mandatories fields

[PizzaConsole]

While I appreciate you trying to provide feedback, I did not ask for it. It really does not help when you do not have context in the overall workings of my application or who is driving the demands of certain features. I would prefer an actually answer, instead of a pot shot akin to a StackOverflow response "you dont know what you want" type thing.

[justin-schroeder]

@PoisnFang the actual plugin logic to do this is a super easy, but unfortunately the way the schema is written it looks like disabled attribute for the built in submit action can only be set by disabling the form. I don’t like that — who the heck wrote that piece of trash (😔)!

It’s worth creating an issue over, so I did #789