B4J Tutorial [BANanoWebix] Lesson 6.X Form Validation

Discussion in 'B4J Tutorials' started by Mashiane, Jul 5, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    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...

    Lesson6_4.gif

    Code:
    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.

    Code:
    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. john@some.com)").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.

    Code:
    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.

    Code:
    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!
     
    joulongleu and Johan Schoeman like this.
  2. Mashiane

    Mashiane Expert Licensed User

    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.

    Code:
    {"user":{"name":"Anele","email":"anele@mbangas.com","password":"Usibabale","otp":"1234","accept":1}}
    To get the form data (NB: all input elements must have a 'name' property) one easily calls.

    Code:
    Dim fd As Map = pg.GetValues("form1")
            
    Log(BANano.ToJson(fd))
    Great isnt it!
     
    joulongleu and Johan Schoeman like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice