B4J Tutorial [BANanoWebix] Lesson 6.X Form Validation

Ola

Let's add form validation. This is a process of ensuring that whatever is entered by users is valid.

We accept isEmail, isNumber, isChecked, isNotEmpty.

Let's create a form with some default settings...

Dim form1 As WixForm
    'initialize form and make it accept names with dots (.)
    form1.Initialize("form1").SetComplexData(True).SetScroll(False)
    form1.SetWidth(350).SetMargin(3)
    'set default settings
    form1.Form.SetDefaultLabelPosition("top")   'labels on top
    form1.Form.SetDefaultLabelWidth(140)        'fix label width
    form1.Form.SetDefaultBottomPadding(18)      'padding at bottom for msg

We want the labels to be on top, the labelwidth to be 140 and the bottomPadding to be 18px. BottomPadding is where our hints/error messages will sit.

We then add the various input elements needed to the form and add them to the rows of the form.

form1.Form.CreateTextBox("").SetLabel("Username").SetRequired(True).SetBottomLabel("* spaces are allowed").SetName("user.name").SetPlaceHolder("e.g. John Smith)").SetValidateIsNotEmpty(True).SetInvalidMessage("Login cannot be empty").AddToRows(form1.Form)
    form1.Form.CreateTextBox("").SetLabel("Email address").SetRequired(True).SetName("user.email").SetPlaceHolder("(e.g. [email protected])").SetValidateIsEmail(True).SetInvalidMessage("Incorrect email address").AddToRows(form1.Form)
    form1.Form.CreateTextBox("").SetLabel("Password").SetTypePassword("").SetRequired(True).SetName("user.password").SetBottomLabel("* The password must have at least 6 characters").SetValidateIsNotEmpty(True).SetInvalidMessage("Password cannot be empty").AddToRows(form1.Form)
    form1.Form.CreateTextBox("").SetLabel("OTP").SetRequired(True).SetName("user.otp").SetValidateIsNumber(True).SetInvalidMessage("OTP should be a number").AddToRows(form1.Form)
    form1.Form.CreateCheckBox("").SetLabelRight("I accept terms of use").SetName("user.accept").SetValidateIsChecked(True).SetInvalidMessage("Must be checked").AddToRows(form1.Form)

This includes required *, hint texts, valid parameters and invalid message settings.

We also add a button to submit the data. On submit, the form should be validated.

Dim cb As BANanoObject = BANano.CallBack(Me, "form_validate", Null)
    form1.Form.CreateButton("").SetValue("Submit").SetAlignCenter("").SetWidth(150).SetClick(cb).AddToRows(form1.Form)
    '
    pg.AddRows(form1.Item)
    '
    pg.ui

On clicking the button we want to call 'form_validate', this validates the form and provides a success / error message.

Sub form_validate()
    Dim bv As Boolean = pg.Validate("form1")
    If bv Then
        pg.Message_Success("Perfect!")
    Else
        pg.Message_Error("Invalid form!")
    End If
End Sub

Ta!

 

[Mashiane]

What does the .SetComplexData(true) do on the form?

To explain, when we set the names of the controls we used, user.email, user.password etc. This has the effect of grouping your data object like.

{"user":{"name":"Anele","email":"[email protected]","password":"Usibabale","otp":"1234","accept":1}}

To get the form data (NB: all input elements must have a 'name' property) one easily calls.

Dim fd As Map = pg.GetValues("form1")
        Log(BANano.ToJson(fd))

Great isnt it!