CON-1109 - BackOffice Error loading jquery validation

Created by Jeremy Newman 15 Jun 2016, 19:27:21 Updated by Warren Buckley 11 Oct 2016, 14:06:46

Install Latest Umbraco from NuGet Install 4.3.2 package from Create a DocumentType with a Grid Add the required jquery, jquery.validation and jquery.validation.unobstrusive to your master layout Create a form Add the form macro to the grid on your new page As soon as you do this you get the error.

3 Attachments


Warren Buckley 29 Jun 2016, 12:15:35

Hello This has been fixed in upcoming 4.3.3. You can either update to a nightly build or wait until the 4.3.3 release, alternatively you can patch the file yourself as follows at /App_Plugins/UmbracoForms/Assets/umbracoforms-dependencies.js

    Umbraco Forms - Dependencies Checker

function performDependencyChecks(formId) {

    //Only perform check if the global 'Umbraco.Sys' is null/undefined
    //If present means we are in backoffice & that this is being rendered as a macro preview
    //We do not need to perform this check here
    if (typeof Umbraco !== 'undefined' && typeof Umbraco.Sys !== 'undefined') {
    } else {
        //Check that a Form ID is passed into the function 
        if (formId) {

            //Select the wrapping div around the form 
            var umbracoForm = document.getElementById('contour_form_' + formId);

            var errorElement = document.createElement('div');
            errorElement.className = 'umbraco-forms missing-library';
   = '#fff';
   = '#9d261d';
   = '15px';
   = '10px 0';
            var errorMessage = "";

            //Ensure umbracoForm is not null
            if (umbracoForm) {

                //Check for jQuery
                if (typeof jQuery == 'undefined') {
                    errorMessage = errorMessage + 'jQuery has not been loaded & is required for Umbraco Forms.';
                } else {
                    //These only work if jQuery is present, so it's in the else block

                    //Check for jQuery Validation
                    if (!$.validator) {
                        errorMessage = errorMessage + '<br />jQuery Validate has not been loaded & is required for Umbraco Forms.'

                    //Check for jQuery Validation Unobtrusive
                    //Only works if jQuery validator has been loaded
                    if ($.validator && !$.validator.unobtrusive) {
                        errorMessage = errorMessage + '<br />jQuery Validate Unobtrusive has not been loaded & is required for Umbraco Forms.';
                if (errorMessage !== "") {
                    errorElement.innerHTML = errorMessage + '<br/> <a href="" target="_blank" style="text-decoration:underline; color:#fff;">See Umbraco Forms Documentation</a>';
                    umbracoForm.insertBefore(errorElement, umbracoForm.childNodes[0]);

Priority: Normal

Type: Bug

State: Fixed




Backwards Compatible: True

Fix Submitted:

Affected versions: 4.3.2

Due in version: 4.4.0


Story Points: