Category: JS Objects
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How to Do Text Field Validation and Load Specific Pages?

Issue

As a user, I need to enter an email address into an input field, and depending on the email address, I want to be redirected to a specific page. I am looking for a tutorial or help on how to implement this in Appsmith.

Resolution

To achieve this, you can follow these steps:

  1. Add an Input Field
    - Drag and drop an Input widget onto your UI.
    - Name it something identifiable, like emailInput.
  2. Add a Button
    - Drag and drop a Button widget onto your UI.
    - This button will trigger the redirection logic.

  3. Create a JSObject
    - Create a function inside your JSObject that gets a string parameter and add the logic to redirect the user to another page.
    - Here's an example code:

    export default {
	redirectUserByEmail (email) {
		email === "admin@example.com"
      ? navigateTo("AdminDashboard")
      : navigateTo("UserDashboard")
      }
  }
  4. Access the Button's onClick Property
    - Select the button.
    - Locate the onClick property in the property panel.
    - Bind the function you created in the previous step like this: {{JSObject1.redirectUserByEmail(emailInput.text)}}.

You can find more information about our navigateTo function here.