2

When submitting a Sitecore Forms form, we get the following Javascript exception in our console:

Uncaught TypeError: Cannot read property 'unobtrusive' of undefined
  at HTMLFormElement.eval (eval at d (jquery.unobtrusive-ajax.min.js:1), <anonymous>:3:13)
  at Object.success (jquery.unobtrusive-ajax.min.js:1)
  at l (jquery-2.1.3.min.js:14)
  at Object.fireWith [as resolveWith] (jquery-2.1.3.min.js:14)
  at p (jquery-2.1.3.min.js:14)
  at XMLHttpRequest.<anonymous> (jquery-2.1.3.min.js:14)

How can this be fixed?

  • 1
    Which Sitecore version? Have you tried the same on clean Sitecore instance? What is the list of js files which are loaded on your page? – Marek Musielak Feb 27 at 15:15
  • Are you using Sitecore Form Extensions by Bart Verdonck? – PSS Feb 27 at 15:17
  • SC 9.0.2 with Forms Extensions – Mark Lowe Feb 27 at 15:20
  • Was able to solve the issue, posting my solution as answer for reference. – Mark Lowe Feb 27 at 15:27
5

This can happen for multiple reasons:

A) Missing attributes on a custom field

Solution: Make sure that the @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value) attribute is present on all of your fields.

See http://madhuanbalagan.com/sitecore-9-forms-uncaught-typeerror-cannot-read-property-unobtrusive-of-undefined for details

B) jQuery is being used in noConflict mode

On successful submit, Sitecore Forms executes some JavaScript that directly targets $.validator.unobtrusive which is not defined. Instead it should be jQuery.validator.unobtrusive.

This can be fixed with a Forms.RenderForm processor:

Config:

<pipelines>
<forms.renderForm>

    <processor type="MyProject.Pipelines.Forms.RenderForm.FixJqueryReference, MyProject" resolve="true" 
               patch:after="processor[@type='Sitecore.ExperienceForms.Mvc.Pipelines.RenderForm.InitializeAjaxOptions, Sitecore.ExperienceForms.Mvc']"/>
  </forms.renderForm>
</pipelines>

Code:

public class FixJqueryReference : MvcPipelineProcessor<RenderFormEventArgs>
{
    public override void Process(RenderFormEventArgs args)
    {
        var attributes = args.Attributes["data-ajax-success"] as string;
        if (string.IsNullOrEmpty(attributes))
        {
            return;
        }

        args.Attributes["data-ajax-success"] = attributes.Replace("$.", "jQuery.");
    }
}
| improve this answer | |
  • I followed the pipeline fix, but now instead of having $.validator is undefined I get jQuery.validator is undefined. Stange thing is that I only get this error if I changed the value in the field, but not on first submit – AJ - Mar 8 at 17:38
  • @AJ sounds like the jquery.validate.*.js can't library is not loaded correctly – Mark Lowe Mar 8 at 19:43
  • But why it would load on the first render of the form but not after I have any validation errors? – AJ - Mar 9 at 13:59
1

There can be multiple reasons for this error as described in previous comment. but if you are still facing the error, then there are chances that your Outerlayout.cshtml file having an wrong order of Forms scripts loading. You need to reference below scripts file before the RenderFormScript() method call.

 <script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery-2.1.3.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.unobtrusive-ajax.min.js"></script>

I have explained this solution here - Sitecoretricks.com

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.