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