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

Copy

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