Interface ClientValidation

Description

In BBj 22.10 and higher, a BBjControl implements the ClientValidation interface if it supports a client-side JavaScript validation function.

Implementing Classes

BBjCEdit, BBjCheckBox, BBjEditBox, BBjEditBoxSpinner, BBjInputD, BBjInputDSpinner, BBjInputE, BBjInputESpinner, BBjInputN, BBjInputNSpinner, BBjListBox, BBjListButton, BBjListEdit, BBjRadioButton

Methods of ClientValidation

Return Value

Method

String

getClientValidationFunction()

String

getClientValidationMessage()

boolean

isClientValidationValid()

void

setClientValidationFunction(String javascript)

void setClientValidationMessage(String message)

Remarks

The client validation function is an arbitrary JavaScript function that returns a boolean value to indicate whether the value is considered to be valid. If the function does not contain the word "return", BBj will insert "return " at the start. If the function contains multiple lines of JavaScript code separated by ";", it must explicitly specify a return statement. Refer to the DWC documentation for DWC-specific notes.

Example

rem ' ClientValidation Example

rem ' Client Validation
sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
flags$ = $00090083$
window! = sysgui!.addWindow(50,50,500,500,"Client Validation",flags$)
window!.setCallback(window!.ON_CLOSE,"eoj")

rem ' https://en.wikipedia.org/wiki/Vehicle_registration_plate
window!.addStaticText(101,25,25,100,25,"License Plate:",$8000$)
lic$ = "ABC123"
lic! = window!.addEditBox(102,130,25,200,25,lic$,$$)
lic!.setName("license")
lic!.setToolTipText("License Plate is 1-12 letters or digits.")
lic!.setAttribute("pattern","^[a-zA-Z0-9 ]*$")
lic!.setAttribute("minlength","1")
lic!.setAttribute("maxlength","12")
lic!.setCallback(lic!.ON_LOST_FOCUS,"blur")
licvalid! = window!.addButton(103,350,25,125,25,"isValid?")
licvalid!.setName("License isValid?")
licvalid!.setCallback(licvalid!.ON_BUTTON_PUSH,"licvalid")
js$ = "return text.length >= 1 && text.length <= 12 && /^[a-zA-Z0-9 ]*$/.test(text)"
lic!.setClientValidationFunction(js$)
print "License getClientValidationFunction:"
print lic!.getClientValidationFunction()
lic!.setClientValidationMessage("License plate is required.")
print "License getClientValidationMessage:"
print lic!.getClientValidationMessage()

rem ' https://en.wikipedia.org/wiki/Vehicle_identification_number
rem ' https://stackoverflow.com/questions/30314850/vin-validation-regex
window!.addStaticText(104,25,75,100,25,"VIN:",$8000$)
mask$ = fill(17,"Z")
vin$ = "1M8GDM9AXKP042788"
vin! = window!.addInputE(105,130,75,200,25,$$,mask$,"",0,vin$,vin$)
vin!.setToolTipText("VIN is 17 letters and digits.")
vin!.setName("VIN")
vin!.setAttribute("pattern","[A-HJ-NPR-Z0-9]{17}")
vin!.setAttribute("minlength","17")
vin!.setAttribute("maxlength","17")
vinvalid! = window!.addButton(106,350,75,125,25,"isValid?")
vinvalid!.setName("VIN isValid?")
vinvalid!.setCallback(vinvalid!.ON_BUTTON_PUSH,"vinvalid")

rem ' omit the check digit calculation
js$ = "return text.length == 17 && /[A-HJ-NPR-Z0-9]{17}/.test(text)"

rem ' include the check digit calculation
gosub js; rem ' VIN check digit calculation functions
js$ = js$ + "return text.length == 17 && /[A-HJ-NPR-Z0-9]{17}/.test(text) && validate(text)"
vin!.setClientValidationFunction(js$)
print "VIN getClientValidationFunction:"
print vin!.getClientValidationFunction()
vin!.setClientValidationMessage("Invalid VIN format.")
print "VIN getClientValidationMessage:"
print vin!.getClientValidationMessage()
vin!.setCallback(vin!.ON_LOST_FOCUS,"blur")
accept! = window!.addButton(1,130,125,200,25,"Accept",$$)
accept!.setName("Accept")
accept!.setCallback(accept!.ON_FORM_VALIDATION,"valid")
accept!.setCallback(accept!.ON_BUTTON_PUSH,"accept")
cancel! = window!.addButton(2,350,125,125,25,"Cancel",$$)
cancel!.setName("Cancel")
cancel!.setCallback(cancel!.ON_BUTTON_PUSH,"cancel")
events! = window!.addCEdit(109,25,175,450,300,$$,$0184$)
event = 0
process_events

eoj:
release

valid:
    event! = sysgui!.getLastEvent()
    info$ = ""
    gosub event
    print event!.getEventName()
    event!.accept(1)
    i = msgbox("Form passed client validation",0,event!.getEventName())
return

accept:
    event! = sysgui!.getLastEvent()
    info$ = ""
    gosub event
    print event!.getEventName()
    i = msgbox("Process known valid form",0,event!.getEventName())
return

cancel:
    event! = sysgui!.getLastEvent()
    info$ = ""
    gosub event
    print event!.getEventName()
    i = msgbox("Cancel form",0,event!.getEventName())
return

blur:
    event! = sysgui!.getLastEvent()
    temp$ = "isTemporary="+Boolean.toString(event!.isTemporary())
    valid$ = "isValid="+Boolean.toString(event!.isClientValidationValid())
    info$ = temp$+" "+valid$
    gosub event
    control! = event!.getControl()
    print event!.getEventName()," ",control!.getName()," ",info$
return

licvalid:
    event! = sysgui!.getLastEvent()
    isValid! = lic!.isClientValidationValid()
    info$ = Boolean.toString(isValid!)
    gosub event
    print event!.getEventName()," ",info$
    i = msgbox(info$,0,"License Valid?")
return

vinvalid:
    event! = sysgui!.getLastEvent()
    info$ = ""
    gosub event
    isValid! = vin!.isClientValidationValid()
    msg$ = Boolean.toString(isValid!)
    print event!.getEventName()," ",msg$
    i = msgbox(msg$,0,"VIN Valid?")
return

event:
    event! = sysgui!.getLastEvent()
    event$ = event!.getEventName()
    control! = event!.getControl()
    control$ = control!.getName()
    event = event + 1
    msg$ = str(event)+" "+event$+" "+control$+" "+info$
    events!.addParagraph(-1,msg$)
    events!.highlight(-1,0,-1,0)
return

rem ' VIN check digit calculation
rem ' https://stackoverflow.com/questions/26407015/javascript-jquery-vin-validator
js:
    js$ = ""
    js$ = js$ + "function transliterate(c)"
    js$ = js$ + "{"
    js$ = js$ + "return '0123456789.ABCDEFGH..JKLMN.P.R..STUVWXYZ'.indexOf(c) % 10;"
    js$ = js$ + "}"
    js$ = js$ + "function get_check_digit(vin)"
    js$ = js$ + "{"
    js$ = js$ + "var map = '0123456789X';"
    js$ = js$ + "var weights = '8765432X098765432';"
    js$ = js$ + "var sum = 0;"
    js$ = js$ + "for (var i = 0; i < 17; ++i)"
    js$ = js$ + "sum += transliterate(vin[i]) * map.indexOf(weights[i]);"
    js$ = js$ + "return map[sum % 11];"
    js$ = js$ + "}"
    js$ = js$ + "function validate(vin)"
    js$ = js$ + "{"
    js$ = js$ + "if (vin.length !== 17) return false;"
    js$ = js$ + "return get_check_digit(vin) === vin[8];"
    js$ = js$ + "}"
return

See Also

BBjAPI

BBjSysGui

BBjControl

See the BBj Object Diagram for an illustration of the relationship between BBj Objects.