Code Snippets validations
- Matias
- Jonathan Cortazzi
- Sergio Rodriguez
Overview
Code snippets allow Wayfast Developers to add client-side Javascript validations in Wayfast.
You can add code-snippets to any control in a Page indicating the event that will trigger the snippet.
In this example we are going to see how to add a validation code-snippet that blocks the page execution until certain conditions are met. But remember code-snippets are not only for validations. You can add logic to change page behavior, execute API calls or anything you can imagine.
Step 1: Add Variables
FormValidation: Comma separated list with fields that require validation (WITHOUT QUOTES)
FormValidationSubmitButton: ObjectName of the submit button that needs to be blocked if validations fails (WITHOUT QUOTES). Only one button is allowed.
Step 2: Add Code Snippets in the editor
Expand “General Information” toggle button and click on “New” Button.
A pop up will be displayed.
Let’s review and fill all the mandatory fields:
Field | Description |
|---|---|
Name | We need to name our code snippet so we can identify it when we have many of them. |
Control | Pick a control from the list of existing controls in the page. This control will be used to trigger the code snippet. |
Event | Select one event to trigger the code snippet. |
Function Type | Custom allow us to add code snippets at page level while “Library” allow us to reuse them among Project and Solutions. |
Parameters | This field is optional and allows you to send constants or variables as parameters to your javascript function. The syntax is: ‘&theNameOfYourControl'. If we want to send a variable you need enclose variable’s name with single quotes. Keep in mind variables are identified with a preceding ampersand. If we use the a constant you can send it in plain text. We can send multiple parameters using comma as separator (“,“ without double quotes). |
Step 3: Inside your code snippet
Inside your java script function you can use @parameters reserved word (including the at symbol) to use the parameters passed to the function. Wayfast will replace @parameters with the list of values passed to the code snippet.
Let’s review the functions associated to the code snippet:
SetFormItemValid Function
This function allows us to notify Wayfast if a control is passing custom validations or not. Provides flexibility to create your own logic for validations and lets you decide if you want to block the user from progressing with the navigation.
Syntax: Wayfast.FormValidation.setFormItemValid('<controlName>', value)
SetFormItemValid Parameters
<controlName> is the name of the control without & and value is a boolean indicating if the validation passed or not.
How to apply the code snippet in any Page?
On this example, we are going to build 2 screens:
“Dashboard” screen will include only a title using “Label” control and below a “Button” control. This element will prompt the 2nd page, a popup screen.
Click on “Preview” button
“Open Form” button redirects to the following page.
“New User” popup screen will be available when clicking on “Open Form” button and it will contain a form page with 5 “Inputbox” controls and also a “Button” to save the new data on the database. This is a similar example used on the following lesson.
Click on “Preview” button
Before enter on the Code Snippet configuration, let’s review the “Add New User” control settings
Selecting the “Close with Postback” option under “Link to Page” field, we are requesting to close the popup as soon as the input values are inserted in our database table. Also it’s important to mention that the button has an action object connected to the stored procedure that will insert the new values.
Now that we check the basic settings under the controls, let’s create the variables.
In General Information, click on “Variables” tab
Click on “New” button and we are going to complete 2 variables:
FormValidation: This variable will be attached to the “FirstName” inputbox control
FormValidationSubmitButton: This variable will be attached to the “ButtonCreate” control
Click on “Submit” button and repeat the steps with the other variable. Once the 2 variables are generated, we can start creating the code snippet validation.
According to the structure created on this application, “Add New User” button control will contain the code snippet validations to verify if the values are correctly input or there’s a pending action to take at this screen before save.
Let’s check the basic code snippet validation:
function test(inputData){
if(inputData == '')
{
Wayfast.FormValidation.setFormItemValid('FirstName', false);
console.log('empty value provided!')
}
else
{
Wayfast.FormValidation.setFormItemValid('FirstName', true);
console.log('Value provided:'+inputData);
}
}
test(@parameters);And this is how it looks like in Wayfast:
In this example we are validating if an inputbox value is empty. If this is the case, we log a message stating “Empty value provided!” in browser’s console and notify “FirstName” control didn’t pass code snippet validations.
After that Wayfast will add a border to “FirstName” for letting the user know which field requires review.
On the other hand, if “FirstName”'s value is not empty we log a message in the console stating “Value provided:” including the value in the field and notify Wayfast “FirstName” did pass the code snippet validation.
Automatically the “Add New User” popup will close and our “Dashboard” page will remain open.
Code Snippet Examples
Event | Snippet |
Key Up | function testEvent(param) { if(param==='') console.log('SnippetValue:Empty'); else console.log('SnippetValue:' + param); } testEvent(@parameters); |
API Call | fetch('https://api.publicapis.org/entries').then(function(response){ return response.json(); }).then( function(data){ var textFromAPI = JSON.stringify(data); console.log(textFromAPI); if (textFromAPI.search(@parameters) > 0) { Wayfast.FormValidation.setFormItemValid('txtData', true); console.log('field was set'); } else { Wayfast.FormValidation.setFormItemValid('txtData', false); console.log('field was empty'); } }).catch(function(error) { Wayfast.FormValidation.setFormItemValid('txtData', false); console.log('An error ocurred while wayfast code snippet was calling the API'); }); |
Regular Expression | function phoneValidator(data){ console.log('Params: '+data) if (data.length===0){ Wayfast.FormValidation.setFormItemValid('txtData',false); return; } var rgex = new RegExp('\(?\+[0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?'); var isValidPhone = rgex.test(data); Wayfast.FormValidation.setFormItemValid('txtData',isValidPhone); console.log("isValid: " + isValidPhone); } phoneValidator(@parameters); |
Name | Regular Expression |
|---|---|
URL | https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*) |
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]) | |
SSN | ^(?!666|000|9\\d{2})\\d{3}-(?!00)\\d{2}-(?!0{4})\\d{4}$ |
IsUsDate | ^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$ |
IsNumeric | ^\d+$ |
HasOnlyLetters | [a-zA-Z]+ |
IsTelephone | /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/ |
Has Special Characters | [\p{P}\p{S}] |
IpAddress | /^((?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])[.]){3}(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])$/ |
Recap
On this lesson, we discovered multiple opportunities to code our application using validations that will provide more complexity to our requirements. We understand how code snippet works under custom or using a library in our projects.