Custom Validation for Nintex Forms

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:

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

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.