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:

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();
}

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;
}

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

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.