-
-
Notifications
You must be signed in to change notification settings - Fork 331
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
canSubmit in form is true even if some fields are unvalid #358
Comments
As of right now, this is by design. I’ll look into the why ASAP and how we could make it better.
Tanner Linsley
…On Nov 19, 2019, 3:23 AM -0700, Anders Hallundbæk ***@***.***>, wrote:
In your own example: https://codesandbox.io/s/react-form-custom-select-multi-select-inputs-6962t
The canSubmit is true even before the two colors in the multiselect have been set. As long as the single select have been set, it's all good.
Is this expected?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
This is an issue for me as well, this needs to be fixed ASAP. Thanks. |
Any fix for this?? My buttons are all active even if an error occurred after validation, not healthy. Please fix this. |
Hi, experiencing issues with this as well. I was expecting Edit: I took a closer look... this is how it behaves:
|
As from today, it's still an issue. Essentially <div className="mt-5 place-self-center md:col-span-2">
<formAPI.Subscribe
selector={(state) => state}
children={(state) => (
<SubmitButton isValid={validateFieldMeta(state.fieldMeta)} />
)}
/> And, here is my utility function to do the full validation before 'activating' import { type FieldMeta } from '@tanstack/react-form';
export function validateFieldMeta(
fieldMeta: Record<string, FieldMeta>,
): boolean {
return Object.values(fieldMeta).every(({ isTouched, touchedErrors }) => {
return isTouched && touchedErrors.length === 0;
});
} And, some tests ✅ for the same: describe('validateFieldMeta', () => {
it('returns false if all fields are not touched', () => {
const input = {
name: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
email: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
help: {
isValidating: false,
isTouched: false,
touchedErrors: [],
errors: [],
errorMap: {},
},
};
const expected = false;
const actual = validateFieldMeta(input);
expect(actual).toBe(expected);
});
it('returns false if all fields are touched but at least one has errors', () => {
const input = {
name: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
email: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
help: {
isValidating: false,
isTouched: true,
touchedErrors: ['Some error'], // Field with error
errors: [],
errorMap: {},
},
};
const expected = false;
const actual = validateFieldMeta(input);
expect(actual).toBe(expected);
});
it('returns true if all fields are touched and have no errors', () => {
const input = {
name: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
email: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
help: {
isValidating: false,
isTouched: true,
touchedErrors: [],
errors: [],
errorMap: {},
},
};
const expected = true;
const actual = validateFieldMeta(input);
expect(actual).toBe(expected);
});
}); Only minor issue now is that whenever we use the browser's |
@t-rosa @manavm1990 please open a new issue with a StackBlitz link or similar. This ticket is specific for the legacy codebase, not the new codebase you're reporting an issue on |
@crutchcorn I added a new issue here with a StackBlitz showing the behaviour for the new Codebase. |
Hey all, I'm closing this issue as it appears to be related to a version of the old non-current Thanks for being early adopters of our tooling! We know that it can lead to issues like this being unresolved sometimes, but we're working hard on the new iteration of Form. Maybe take a look and let us know what you think? Best,
|
In your own example: https://codesandbox.io/s/react-form-custom-select-multi-select-inputs-6962t
The canSubmit is
true
even before the two colors in the multiselect have been set. As long as the single select have been set, it's all good.Is this expected?
The text was updated successfully, but these errors were encountered: