Shay Shmeltzer's Oracle Development Tools Tips

Using Regular Expression Validators in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

Oracle JET offers a set of validators that you can use to do client side validation on data the user is entering in a form. In this short blog I'll show you how to use it in a Visual Builder form. You can learn more about JET validators looking at the JET cookbook - for example here: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=validators&demo=regExpValidator

Before you go too deep looking into the JET code samples, make sure you are using the correct cookbook for the JET version used in Visual Builder. Right now (Jan 2020) VB is using JET 7.1.1 (you can see this in the about box in Visual Builder). So you'll want to look at the parallel JET version of the cookbook, which you can find at: https://www.oracle.com/webfolder/technetwork/jet-710/jetCookbook.html (play with the version number in the URL to get to other versions such as 720).

Now you can look at the JavaScript piece of code to see how a validator component is constructed. For example in the regular expression validator you'll see a piece of code that looks like this and returns a validator type object:

          this.emailPatternValidator = ko.pureComputed(function () {
            return [{
              type: 'regExp',
              options: {
                pattern: "[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*",
                hint: "enter a valid email format",
                messageDetail: "Not a valid email format"

One way to use this type of validator in Visual Builder is to create a pageModule function in your page that will return the validator object. This can look like this (for a regex that validates we only got numbers for example):

  PageModule.prototype.numValidator = function() {
    return [{
      type: 'regExp',
      options: {
        pattern: "[0-9]*",
        hint: "enter a valid number",
        messageDetail: "Not a valid number format"

The last step is to reference the above function in the HTML code of you VB page. While you can enter the value in the property inspector (search for validator in the All tab), You can also switch to the code view and there you'll get code insight as you type the following in the HTML :

  <oj-input-text validators="{{$page.functions.numValidator()}}"...>

These are not the only type of client side validations you can do in Visual Builder - learn about others in this blog entry.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.