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

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
[code]
if(CheckAllFields() == true) {return true;} else {return false;}
[/code]

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)

[code language=”javascript” collapse=”false”]
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
[/code]
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.