Notification Not Showing When Required Fields are Empty in form

đź’¬ App Building
1

Hi,

I’m using a form in Retool with required fields. When I click the submit button and some fields are empty, I want to show a notification message (like a toast).

I tried using utils.showNotification() inside a “Run script” on the button, and also tried form.validate() with .invalid, but none of the notifications show up.

Even a simple test notification on button click doesn’t appear. My submit button is inside a form. I tried setting and unsetting “Form to submit”.

Can someone from the Retool team help figure out why no script runs at all on submit?

Any help would be helpful.

2

Hey @suchi_redde

To display a notification when required fields are empty in your form, you need to ensure that your button's event handlers are set up correctly. Here are some steps you can follow to troubleshoot and configure your button:

  1. Set Event Handlers: Make sure that the Event for your button is set to Submit and that the Action is set to Run script. This will ensure that your script is executed when the button is clicked.

  2. Validate Form: Before executing any notification, use the form's validation function. You can do something like this in the script:

    if (form.validate().invalid) {
    utils.showNotification("Please fill out all required fields.", "error");
    return;
}

  3. Check Notification Setup: Ensure that your notification settings are correct. You can adjust the notification's Type (info, success, error) to change its appearance.

  4. Testing with Simple Notification: To test if notifications work in your app, try running a simple script like this on the button:

    utils.showNotification("Test notification.");

    If this doesn't show up, the issue may not be with your form but rather with the notification setup itself.

  5. Debugging: Check the browser console for any errors when you click the button. If there are any JavaScript errors, they might prevent your notifications from displaying.

  6. Form Submission: If you have set Form to submit correctly but still face issues, consider setting it to false, then managing the submission through a manual query call after validation passes.

3

@suchi_redde ,
Are you still having an issue with notifications on your form submit? If so, could you please upload your json file from your app?

export to json example
export to json example980Ă—762 76 KB