Build forms with validation

In Enoria, creating forms is really easy. You create a FormKey, pass it to a Form widget, add in some TextFormFields and you're good to go! You can also provide validator functions to your field, and display errors if there is any of them.

Example : Login form

To do that, we first need to create a custom widget. We need to create a state variable called loggedin, that will tell us if the user is logged in or not, and display the correct widget tree:

This page is under construction! There will be more explanations later on.

Menu.lua

Menu

local e = require(game.ReplicatedStorage.Common.Enoria.packages.Enoria.Enoria)
local Widget = require(game.ReplicatedStorage.Common.Enoria.packages.Enoria.Widgets.Widget)
local FormKey = require(game.ReplicatedStorage.Common.Enoria.packages.Enoria.Widgets.FormKey)

local MyForm = {}
MyForm.__index = MyForm
setmetatable(MyForm, Widget)

function MyForm.new(context)
   local self = Widget.new(nil, nil, context)
   setmetatable(self, MyForm)

   self.Context.Uses.Store:Listen(self, "login")
   self.FormKey = FormKey.new()
   self.Username = ""

   return self
end

function MyForm:Build()
   local tree

   if not self.Context.Uses.Store.Getters.getLoggedIn() then
      tree = self:BuildTree(
       e.Container({
          Child = e.Form(self.FormKey, {
             Child = e.Column({
                HorizontalAlignment = Enum.HorizontalAlignment.Center,
                VerticalAlignment = Enum.VerticalAlignment.Center,
                Children = {
                    e.TextFormField(self.FormKey, {
                       Name = "Username",
                       PlaceholderText = "Username",
                       Validator = function(value)
                           if string.len(value) <= 0 then
                               return "Must not be empty."
                           end
                           return nil
                       end,
                       BuildErrorLabel = function(validationError)
                           return e.TextLabel(validationError)
                       end,
                    }),
                    e.TextFormField(self.FormKey, {
                       Name = "Password",
                      PlaceholderText = "Password",
                      Validator = function(value)
                         if string.len(value) <= 0 then
                            return "Must not be empty."
                         end
                         return nil
                      end,
                      BuildErrorLabel = function(validationError)
                         return e.TextLabel(validationError)
                      end,
                    }),
                    e.TextButton("Login", {
                       OnClick = function()
                           if self.FormKey:Validate() then
                              self.Context.Uses.Store:Commit("login", {username = self.FormKey.Fields.Username.Element.Text, password = self.FormKey.Fields.Password.Element.Text})
                           end
                       end
                    })
                }
             })
          })
       })
      )
   else
      tree = self:BuildTree(e.TextLabel("You are logged in."))
   end

   return tree
end

return MyForm