cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Validation for Nintex Forms

aaron_labiosa
Nintex Newbie
27 10 19K

Products: Nintex Forms 2013, Nintex Forms 2010

There have been several requests recently for the ability to have custom validation in Nintex Forms using JavaScript and/or how to submit a form via JavaScript. Here you will find an example of how to accomplish this.

Here is a sample JavaScript that can be inserted into 'Custom JavaScript' in your form settings:

customjs.png

JavaScript
  1. //Sets fields in parameter to have a red background.
  2. function showInvalidFields(fields){ 
  3.   
  4.         for (var i = 0; i < fields.length; i++) {
  5.       
  6.         fields[i].css('background-color', 'red !important');    }
  7.   
  8. }
  9. //Sets fields in parameter to have a white background.
  10. function resetInvalidFields(fields){ 
  11.   
  12.         for (var i = 0; i < fields.length; i++) {
  13.       
  14.         fields[i].css('background-color', 'white !important');    }
  15.   
  16. }
  17. //Pass Client ID configured in Control to this function.
  18. function validateBlankField(nfclientid){
  19.   
  20. if(!NWF$('#' + nfclientid).val().match(/./)) return false;
  21.   
  22.     return true;
  23.   
  24. }
  25. //Pass label of out of the box 'Save and Submit' button as parameter.
  26. function submitForm(buttonName){
  27.   
  28.     var validated = true;
  29.     var invalidFields = [];
  30.     var validFields = [];
  31.   
  32.     //Validating the field 'mytextbox'.
  33.     if (!validateBlankField(mytextbox)){
  34.         validated = false;
  35.         invalidFields.push(NWF$('#' + mytextbox));
  36.     }
  37.   
  38.     else{
  39.         validFields.push(NWF$('#' + mytextbox));
  40.     }
  41.     //If form passes validation, submit.
  42.     if(validated){
  43.         resetInvalidFields(validFields);
  44.         NWF$(".nf-disableonsubmit[value="+buttonName+"]").click();
  45.     }
  46.   
  47.     //If form fails validation, show invalid fields and prompt.
  48.     else{
  49.          resetInvalidFields(validFields);
  50.          showInvalidFields(invalidFields);
  51.       
  52.         alert('The form is invalid, please correct the highlighted fields, and submit again');       
  53.     }
  54. }

Example script Usage:

Add a Textbox and give it a Client ID  of 'mytextbox'.

Add a button and set its action to 'Save and Submit'. Set its label to 'mysubmitbutton'.

Add another button and set its action to 'JavaScript'. Set its label to 'Submit' and its 'Client Click' setting to 'submitForm('mysubmitbutton');'.

Place the 'Submit' button over the 'mysubmitbutton' so that the 'mysubmitbutton' is hidden.

Preview the form and try to submit the form with 'mytextbox' blank. You should get an alert indicating a field should be corrected and it will be highlighted.

Note: This solution is fully compatible with the built in Validation system in Nintex Forms however, this validation will occur prior to the form being evaluated by the built in Forms Validation.

10 Comments
bamaeric
Nintex Newbie

I'm using Nintex Forms 2010 and IE11.  I got the validation to work but the fields will not highlight in red.  Any ideas?

larry_bolton
Nintex Newbie

This seems to work great for single-line text fields.

However, the highlighting only works for single-line text fields.

Also, the validation fails on multi-line text fields - it won't let the submission go through.

Are there any updates to this script for these issues?

Thanks in advance!

aaron_labiosa
Nintex Newbie

Hi Larry,

I only ever wrote this for single-line text fields as that was what suited my needs at the time. That said, if I get some time I will look at expanding this out to support other control types.

What fields specifically are you looking at other than multi-line text fields?

Cheers!

Aaron

larry_bolton
Nintex Newbie

I'm working on a very large form, and it uses every data type: single-line text, multi-line text, choices as dropdowns, choices as checkboxes, lookups as dropdowns, dates and of course, numbers as integers, currency and percentages, although it appears that Nintex Forms treats numbers as single-line text boxes.

Thanks again for your efforts!

dhayanandkalimi
Nintex Newbie

Hi Aaron Labiosa,

When i tried this code it showing the below error.
Please let me know how could we solve or fix the issue.

Error ocuured while clicking on java script buttion and am not able to submit

I am getting error, even after filled all the values in form. Please help us to solve this issue.Here i am using some out of the box nintex validation as well our custom java script valildation.
Please let me know weather it support custom java scirpt validation as well out of the box validation at the same time in a form.

Regards,
Dhayanad Kalimidi,

prashanth_hamse
Nintex Newbie

When I tried for Dropdown , lookup control doesn't hightlight in RED! please help the css

DropdownCtrl.css('background-color', 'red !important');  --- > doesn't work here

 

apham
Nintex Newbie

I am trying to highlight drop down menus too.  However I can only highlight single line text fields.  Does anyone have a solution to this?

tanakorn_note
Nintex Newbie

// validate list lookup field

  1. if ((!validateBlankField(listLookup))||(NWF$('#' +listLookup).val()=="**SelectValue**")){
  2.         validated = false;
  3.         listLookup = listLookup.replace("_hid","");
  4.         invalidFields.push(NWF$('#' + listLookup));
  5.     }
  6.   
  7.     else{
  8.         validFields.push(NWF$('#' +listLookup));
  9.     }
apham
Nintex Newbie

@tanakorn wareesangtip

Are you able to apply CSS to lookup fields dynamically?  As mentioned by @Prashanth Hamse 
DropdownCtrl.css('background-color', 'red !important'); --> doesn't work.

tanakorn_note
Nintex Newbie

Try this insert this in form setting in Custom CSS

.redborder {
 border: 2px solid red !important; 
 }

and replace

fields.css('background-color', 'red !important'); 

to 

fields.addClass("redborder");  

for remove 

fields.removeClass("redborder");