Skip to main content

Exercise: Validate an email address

A possible solution is at the end of this page.

Try it yourself

Open Exercise-BuiltInValidation.bbj from 07_ControlValiation.zip for the exercise source code.

This exercise builds on the example program that demonstrates built-in client-side validation combined with form-level validation.

Goals:

  1. Add more validation so that the Email field is a required field.

  2. Add a pattern validation to the Email field using the provided regular expression. See the code for an example of a regular expression that validates an email address.

Possible solution

The starter file is Exercise-BuiltInValidation.bbj. The solution is in Exercise-BuiltInValidationComplete.bbj, and you find all files in 07_ControlValiation.zip.

Exercise-BuiltInValidationComplete.bbj
rem /**
rem  * Exercise-BuiltInValidationComplete.bbj
rem  *
rem  * This is the completed version of the Exercise-BuiltInValidation.bbj program.
rem  */


rem If the app is running in BUI, switch it automatically to run in the DWC client instead
if info(3,6)="5" then
    bui! = BBjAPI().getBuiManager()
    url! = bui!.getUrl().replaceAll("apps", "webapp")
    action! = bui!.urlAction(url!)
    bui!.setEndAction(action!)
    release
endif


rem Create the main window
window! = BBjAPI().openSysGui("X0").addWindow("BBj DWC CSS Layout Samples", $00180093$)
json! = new JsonObject()
json!.addProperty("width", "100%")
json!.addProperty("height", "100%")
json!.addProperty("box-sizing", "border-box")
json!.addProperty("display", "grid")
json!.addProperty("grid-template-columns", "auto 1fr")
json!.addProperty("align-items", "center")
json!.addProperty("gap", "var(--dwc-space)")
json!.addProperty("padding", "1em")
window!.setPanelStyle("@element", json!.toString())
window!.setCallback(window!.ON_CLOSE, "onExit")


rem Build the Contact Form
lbl! = window!.addStaticText("* First Name:", $8000$)
editFirstName! = window!.addEditBox("Charlie"); editFirstName!.setPlaceholder("First name")
lbl! = window!.addStaticText("* Last Name:", $8000$)
editLastName! = window!.addEditBox("Brown"); editLastName!.setPlaceholder("Last name")
lbl! = window!.addStaticText("Company:", $8000$)
editCompany! = window!.addEditBox(""); editCompany!.setPlaceholder("Company")
lbl! = window!.addStaticText("Email:", $8000$)
editEmail! = window!.addEditBox(""); editEmail!.setPlaceholder("Email")
lbl! = window!.addStaticText("Country:", $8000$)
editCountry! = window!.addEditBox("USA"); editCountry!.setPlaceholder("Country")
lbl! = window!.addStaticText("City:", $8000$)
editCity! = window!.addEditBox("Albuquerque"); editCity!.setPlaceholder("City")
lbl! = window!.addStaticText("State:", $8000$)
editState! = window!.addEditBox("New Mexico"); editState!.setPlaceholder("State")
lbl! = window!.addStaticText("Zip Code:", $8000$)
editZip! = window!.addEditBox("87109"); editZip!.setPlaceholder("Zip Code")

btnSubmit! = window!.addButton("Submit")
btnSubmit!.setAttribute("theme", "outlined-primary")
btnSubmit!.setAttribute("expanse", "xl")
btnSubmit!.setStyle("grid-column", "1 / 3")
btnSubmit!.setStyle("margin-top", "1em")
btnSubmit!.setCallback(BBjButton.ON_FORM_VALIDATION, "OnFormValidation")

rem Define the built-in client-side validation for the first and last name fields
rem by setting them to be required
editFirstName!.setAttribute("required", "true")
editLastName!.setAttribute("required", "true")

rem Define the built-in client-side validation for the zip code field
rem by setting a valid regular expression pattern
editZip!.setAttribute("pattern", "(\d{5})(-\d{4})?")


rem Add code below to make the Email field take advantage of built-in validation to make it:
rem 1) required and 2) match a regex pattern for a valid email address.  Tip: the following works
rem well for an email regular expression: ^[\w!#$%&’*+/=\-?^_`{|}~]+(\.[\w!#$%&’*+/=\-?^_`{|}~]+)*@[\w-]+(\.[\w]+)*(\.[a-z]{2,})$
editEmail!.setAttribute("required", "true")
editEmail!.setAttribute("pattern", "^[\w!#$%&’*+/=\-?^_`{|}~]+(\.[\w!#$%&’*+/=\-?^_`{|}~]+)*@[\w-]+(\.[\w]+)*(\.[a-z]{2,})$")


window!.setVisible(1)
process_events


rem ================================================================================================
rem Subroutines
rem ================================================================================================

rem Handle the user exiting the app
onExit:
release


rem Handle the form validation
OnFormValidation:
    e! = BBjAPI().getSysGui().getLastEvent()
    firstName! = e!.getText(editFirstName!)
    lastName! = e!.getText(editLastName!)
    if (len(firstName!) AND len(lastName!)) AND (e!.getText(editEmail!).trim().length()) then
        e!.accept(1)
        temp = msgbox("Congrats, you filled in the form successfully!", BBjSysGui.MSGBOX_ICON_INFORMATION, "Form Submitted Successfully", mode="theme=success")
    else
        e!.accept(0)
        temp = msgbox("Oops, you didn't fill out the form completely - remember to fill in your email address!", BBjSysGui.MSGBOX_ICON_STOP, "Invalid Input", mode="theme=danger")
    endif
return


declare auto BBjTopLevelWindow window!
declare auto BBjStaticText lbl!
declare auto BBjEditBox editFirstName!
declare auto BBjEditBox editLastName!
declare auto BBjEditBox editCompany!
declare auto BBjEditBox editEmail!
declare auto BBjEditBox editCountry!
declare auto BBjEditBox editCity!
declare auto BBjEditBox editState!
declare auto BBjEditBox editZip!
declare auto BBjButton btnSubmit!
declare auto JsonObject json!
declare auto BBjFormValidationEvent e!

rem Use statements
use com.google.gson.JsonObject