Nintex Forms and Validation rules: a good feature added, but not so great yet for validating fields, Javascript to the rescue !

Standard

Nintex introduced validation rules in version v1.5.2.0 of Nintex Forms 2010 and v2.3.1.0 of Nintex Forms 2013. They provide a quick way for checking if a field has to be mandatory depending on a rule, hence make use of the Nintex Formula language to perform a logic that may be more advanced than just the “mandatory” default option in any SharePoint column.

However I found that the Validation Rules did not really help. The first inconvenience is that each field needs to have its rule and therefore if 20 fields: 20 rules to edit. Another problem I faced is that I wanted to compare Dates, or compare entered username with another. For some it is easier to just call for JavaScript function to evaluate my own rules.

I am therefore listing below what I have used as steps to add JavaScript validation to my Nintex Forms since I did find a few leads on Nintex Connect / Community site (mainly Vadim’s blog and these articles) but not one unique article to tackle all fields validation type.

Step 1:Give a JavaScript object name to each field that needs its value check

JS_Name

Step 2: Point the Nintex Forms Settings to use a custom JS file

Nintex_Form_Settings

Step 3: Tell the Submit button to use your JS function

Edit the Save & Submit button properties to call your Function CheckAllFields() when it is clicked

if(CheckAllFields() == true) {return true;} else {return false;}

Submit_button

 Note: Although some posts mentioned to switch the Button Type to “Javascript” in my case it would execute the code but not stop if validation failed (return false; was ignored) however leaving Type as “Button” did work. (may be a bug in Nintex Forms, as version experienced was Sept. 2014)

Step 4: Create a new text file on your site and paste the JavaScript code

Use a text editor or SharePoint Designer and save the following code in the same URL as defined in Step 2 (in my case

Site URL/Assets/scripts/FormFieldValidation.js)

function CheckAllFields()
{
     var tError=false;
     var thisField;
     var thisFieldName;
     // validate DROP DOWN list value
     thisField=jsDROPDOWN1;
     var thisFieldName = "Drop Down field"
     var myValue = NWF$("#" + thisField ).find(":selected").text();
     tError = CheckListField(myValue, thisFieldName);
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // validate RADIO BUTTON value
     thisField=jsRADIOBUTTON1;
     var thisFieldName = "Radio Button "
     var myValue = NWF$(NWF$("#" + thisField).find("input:checked")).val()
     tError = CheckRadioField(myValue, thisFieldName;
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // validate PEOPLE PICKER value
     thisField=jsPEOPLEPICKER1;
     var thisFieldName = "Person field"
     var myTextControl = NWF$("#" + thisField );
     var myValue = myTextControl.val();
     tError = CheckPeopleField(myValue, thisFieldName);
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // validate DATE value
     thisField=jsDATE1;
     var thisFieldName = "Date field"
     var myTextControl = NWF$("#" + thisField );
     var myValue = myTextControl.val();
     tError = CheckDateField(myValue, thisFieldName);
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // validate TEXT field value
     thisField=jsTEXT1;
     var thisFieldName = "Title Text field"
     var myTextControl = NWF$("#" + thisField );
     var myValue = myTextControl.val();
     tError = CheckTextField(myValue, thisFieldName);
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // validate MUTI LINE field value
     thisField=jsDescription;
     var thisFieldName = "Multi Line Description field"
     var myTextControl = NWF$("#" + thisField );
     var myValue = myTextControl.val();
     tError = CheckTextField(myValue, thisFieldName); // multi line field but Text only so can be compared just like Text field
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // validate CHECK BUTTON value
     thisField=jsDirectorates;
     var thisFieldName = "Check Radio button "
     var myValue = NWF$(NWF$("#" + thisField).find("input:checked")).val()
     tError = CheckRadioField(myValue, thisFieldName);
     if (tError==true) { NWF$("#" + thisField ).focus(); return false; } //if field is error: stop submission.

     // After all validation have passed let"s submit the form
     document.aspnetForm.submit();
     return true;
}

//
// FOR EACH TYPE OF FIELD WE MAY HAVE A DIFFERENT WAY OF CHECKING THE VALUE IS ENTERED OR SELECTED
// DEPENDING IF RADIO BUTTON, DATE (MAY HAVE TO COMPARE IT) ETC...
//
function CheckTextField(myValue, myLabel)
{
     if (myValue=="") // Text type field value can be compared with blank string
     {
          alert(myLabel + " cannot blank " );
          return true;
     }
     else
     {
          return false;
     }
} //end if value is not blank 

function CheckDateField(myValue, myLabel)
{
     if (myValue=="") // Date type field value can be compared with blank string
     {
          alert(myLabel + " cannot be blank");
          return true;
     }
     else
     {
     //convert value to date
     var myDate=myValue;
     myDate=myDate.split("/");
     var newDate=myDate[1]+"/"+myDate[0]+"/"+myDate[2];
     var inputDate = new Date(newDate); // convert the field value into Date
     var todaysDate = new Date(); // get Today"s date
     todaysDate.setHours(0,0,0,0); // reset the time of today to be able to compare if Today
     if(inputDate >= todaysDate) // compare Field date to Today date
     {
          alert(myLabel + " cannot be later than today");
          return true;
     }
     else
     {
          return false;
     }
     } //end if value is not blank
}

function CheckPeopleField(myValue, myLabel)
{
     if (myValue=="") // People field type value can be compared with blank string
     {
          alert(myLabel + " cannot blank");
          return true;
     }
     else
     {
          return false;
     }
} //end if value is not blank

function CheckListField(myValue, myLabel)
{
     if( myValue.indexOf("Please") >= 0 ) // Drop Down list position of the selected choice can be retrieved and make sure it is not the default choice which contains "Please select a choice in the list".
     {
          alert("Please select a " + myLabel );
          return true;
     }
     else
     {
          return false;
     }
} //end if value is not blank

function CheckRadioField(myValue, myLabel)
{
     if (myValue== undefined ) // Radio button are "undefined" if not selected
     {
          alert("Please select a " + myLabel );
          return true;
     }
     else
     {
          return false;
     }
} //end if value is not blank

Hope this help anyone who needs more control in the fields validation, this code is not perfect and has room to improve but I know it will help me next time.

Advertisements

7 thoughts on “Nintex Forms and Validation rules: a good feature added, but not so great yet for validating fields, Javascript to the rescue !

  1. Hi Francois. Did you know that you don’t actually have to have a separate validation rule for every control in Nintex Forms? A rule can apply to multiple controls; just select multiple controls and then click the Add Rule button. Need to add another control to an existing rule? Select the controls you want to add, click the context menu on the rule, and select “Add to selected controls”.

    In cases where you’ve got validation rules on multiple controls you’ll almost certainly want the rules to reference the value of each control individually. In this case you’ll want to use the {Self} token in the Named Controls tab of the Formula builder.

    I’d be interested to hear more about the problems you had with date comparisons. For user name comparisons, these can be tricky due to claims based auth. We have a runtime function in our library that deals with this specifically. If you want to compare usernames you can use the userEquals() function.

    Please let me know how you go.

    • Thanks Daniel, sorry about the delay in responding,

      Yes I knew about using 1 rule and applying it to many fields, but in the case you want to check field value against another field I had to edit each field which needed that validation, quite a few clicks. And also I could display all the Rules regardless of which field is currently selected and edit each rule formula one by one.
      I guess it’s the old-style structured programming that came to my mind for editing the code and debugging in Developer Toolbar, whereas Nintex Validation Rules debugging is missing I believe, so it was easier/clearer to just refer a long JS script once in the whole form and call it from the Submit button.
      This way I could even have a developer that continue to increment the JS validation script in the external file WITHOUT even editing the Nintex Forms.

  2. Joe Paulson

    This has been extraordinarily helpful in getting me closer to where I want to be with my Nintex form. I am new to dev work and javascript, but are there pieces of this script that need to be customized? I am assuming this is not quite a copy paste script. Do you need to associate sections of the script to either a javascript client ID or a list/form field name? Thanks again for your excellent article.

    • Joe, the steps I listed at the time were pretty much ready made code that can be applied in a copy/paste way to a form, but it was a workaround to a specific validation I needed to get in the field values, since then the Validation Rules have been enhanced and you could do this with just rules.

  3. Themos

    Really good article Francois! A quick question, while investigating the Nintex form validations did you ever find a way to detect from JS if the Nintex validations were successful or not?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s