[Feature]: Validation should be shown on click of submit button in form and JSON form widget.

[kamleshvisvkarma]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

Do we have any plan to show validation on submit button?

Instead of disabling the submit button, we need to keep it enabled and show validation on its click.

Because if any field is accidentally left out in case of disabling the button. In this case, the button remains disabled and the user does not know where the error is

Why should this be worked on?

Disabling the submit button until all form fields are correctly filled can be frustrating for users, especially if they make a mistake and need to go back and fix it.

• When users fill out a form and click submit, they receive instant feedback on any errors they may have made.

• By showing validation messages next to the relevant fields or at the top of the form, users receive clear guidance on what needs to be corrected.

• Users with disabilities, such as those relying on screen readers, may struggle to understand why a submit button is disabled. Providing visible validation messages ensures accessibility for all users and helps create a more inclusive experience.

• Allowing users to submit the form even if there are errors encourages them to complete the form in one go, rather than abandoning it due to frustration with disabled buttons or unclear error messages.

[kamleshvisvkarma]

https://stackblitz.com/edit/form-validation-reactjs?file=src%2FApp.js

Whatever validation we want, you can see it by opening this link. If the submit button is not disabled or when I click on the submit button the validation message of the required field is shown.

[kamleshvisvkarma]

Is there any update on this... @Nikhil-Nandagopal @somangshu @kamakshibhat-appsmith @LagunaElectric

[Nikhil-Nandagopal]

@kamleshvisvkarma we don't have this on our roadmap yet.

1. If a field is marked as required and a user focuses on it but does not enter a value, it will show the error
2. You can indicate required fields with a * in the label
3. You can manually add errors to the fields on submit by having text widgets next to / under them and controlling their visibility on submit