Error Validation Summary on top of Nintex Forms

Although Nintex Forms is mature product but still has very annoying issue with error handling, it shows as Validation summary instead of each error respective to field as it is done in SharePoint, which I myself find annoying and confuses end users who are now used to SharePoint error messages.

The most hated part is when there is error nothing happens, just a Validation Summary is shown at top of the page without changing the focus of page to errors, so user don’t know what’s happening.

Anyways long story short thankfully I found a blog, which is a trick (still I expect better solution from such an expensive product) and might decrease the frustration: https://community.nintex.com/thread/2447. All credit goes to author of the blog who gave an idea and code to work on.

In blog, author made the Error Messages fixed to top of page using CSS, but we don’t wanted to use left side of page and also if error message is descriptive won’t be so pretty looking.

Objective:

  • Show error messages to user when submit is clicked
  • User friendly
  • Align with form width
  • User able to fill the field if it’s under the error message or ability to close the message

Solution:

We will use the same CSS and trick that’s mentioned in the above blog link but will modify to meet our needs.
This is what our end result will look like:

Nintex form error messages by Deepak Virdi

Step 1:

Add the custom javascript and reference to Font Awesome CSS in Nintex form settings.
Note: You can skip Font Awesome css and can use your own image or just text.

https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

Javascript: It adds a new DIV tag and a text box (to set focus) before the Validation Summary DIV and binds a click function on Close span.

NWF$(document).ready(function() {
    NWF$("div.nf-validation-summary").before("<div class='nf-validation-close'><input type='text' id='nf-error-focus' /><span id='nf-close-error'><i class='fa fa-times nf-close-i'></i></span></div>");
    NWF$("#nf-close-error").click(function() {
        NWF$("div.nf-validation-summary").hide("slow");
        NWF$(".nf-validation-close").hide("slow");
        return false;
    });
});

function setFocusOnError() {
    NWF$(".nf-validation-close").show();
    NWF$("#nf-error-focus").focus();
}

Nintex form error messages by Deepak Virdi

Step 2:

Add custom CSS in Form Settings: The z-index will fix the issue if error message is behind the form.
This is modified CSS from above mentioned blog:

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
div.nf-validation-summary {
    animation: fadeIn 1s;
    border-radius: 4px;
    border: 1px solid red;
}
.nf-validation-close {
    text-align: right;
    display: none;
    animation: fadeIn 1s;
    margin-bottom: -25px;
    margin-right: 5px;
}
.nf-validation-close span {
    cursor: pointer;
}
#nf-error-focus {
    font-size: 1pt;
    height: 1px;
    width: 1px;
    float: left;
    opacity: 0;
}
.nf-fa-2x {
    font-size: 20px;
    padding: 3px 2px 0 0;
}

Nintex form error messages by Deepak Virdi

Step 3

Final step will to show the newly added div tag and set focus to top of the page if error on button click. Add the following code on Submit button Client Click.

setFocusOnError();

Nintex form error messages by Deepak Virdi

Save and publish your form.

Hope this might be the temporary workable solution, but still waiting for Nintex get it fixed.

Well that’s it. If you find any issues or have question please leave a comment.

2 thoughts on “Error Validation Summary on top of Nintex Forms

  1. Can’t get this solution working at all. I’ve also noticed the code in your pictures is different than the code in your ‘code’ – does this still work by chance?

    1. Hi,

      You were right, but the solution was working for me. Ignore screen shots but code is fine.
      Anyways, I made few changes after this blog was written so added the new code. It works better and mobile friendly. Also will set focus at top of page so that user know if error.

      Hope this works for you. Cheers

Leave a Reply to Deepak Virdi Cancel reply

Your email address will not be published. Required fields are marked *