Client-Side Random Term Validation in Nintex Forms

As of the time of writing this post, Nintex Forms does not have an ability to add server-side CAPTCHA out-of-the-box. But what if you want to have a random word generated on the screen and then have users enter in the correct word before they are able to progress with the form? Well, I have a workaround for you! 

NOTE: This validation is performed client-side.

The Build

Open up the Nintex Forms Designer and add a Rich Text control. After adding the Rich Text Control, open the configuration settings of the control and click body of the control and then click on the 'Edit Source' button.

The Code

Place the following code in the HTML Source of the Rich Text Control:

<label for="random">Random Term</label> 
<input disabled="disabled" id="random"/>
 <label for="randomInput">Please enter Random Term output: </label>
 <input id="randomInput"/>

You should now see the following in the Rich Text box:

Next, click on the Save button and add the CSS class name to the control: "testClass".

Open the Form Settings in the Forms Designer and expand the 'Custom CSS' section. 

Add the following CSS Class:

.testClass {
visibility: collapse;

Next, let's add the JavaScript used to grab the term from the Array and control if the Save button is visible or not. 

With the Form Settings window still open, expand the Custom JavaScript section and add the following JavaScript:

NWF$(document).ready(function () {
 var valArray = ["Purple","Monkey","Dishwasher","Shell","Peanut","Stout","Brooklyn","Hugo","Ranger","Jet"];
 var randVal = valArray[Math.floor(Math.random()* valArray.length)];
NWF$('#randomInput').blur(function () {
var rInput = NWF$('#randomInput').val();
 if (rInput != randVal) {
alert("Please enter matching values");
NWF$('.testClass').css("visibility", "hidden");
} else if (rInput == randVal) {
 NWF$('.testClass').css("visibility", "visible");

Save the JavaScript and then Save/Publish your form. Let's see what this guy looks like!

The Result

Here is what the form looks like on load:

What happens if I enter an incorrect term in the Random Term output input?

When the input field loses focus, the JavaScript will fire and since the terms did not match, the alert appears asking us to enter matching values. 

So what happens if I enter the correct term?

Notice that the Save button now appears! Only if the values match, will the save button appear per the CSS classes we assign the button control.

Feel free to leave any questions or comments and remember to check out Nintex Connect for awesome information on all things Nintex!