Custom Validation for Nintex Forms

A
Userlevel 7
Badge +10

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

 

Example script Usage:

 

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

82075_pastedImage_2.png

 

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

 

82664_pastedImage_4.png

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

 

82666_pastedImage_1.png

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

 

82667_pastedImage_2.png82668_pastedImage_3.png

 

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.

 

82669_pastedImage_4.png

 

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 replies

bamaeric
Userlevel 5
Badge +13

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

L
Badge +3

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!

A
Userlevel 7
Badge +10

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

L
Badge +3

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!

D
Badge +4

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,

P
Badge +1

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

 

A
Badge +4

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?

T

// 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.     }
A
Badge +4

@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.

T

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"); 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings