MVC Foolproof validation 'Sys is not defined&#

Question

I used the package manager console to install these two packages: foolproof & MvcExtentions.Foolproof. I included the foolproof script files in my bundle config (see below).

Note that I didn't implement any foolproof code yet, I only installed the pacakges and included the script files and then ran the app.

I'm getting the following clientside error:

MvcFoolproofValidation.js: Uncaught ReferenceError: Sys is not defined

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
     "~/Scripts/jquery-{version}.js",
     "~/Scripts/jquery-ui-{version}.js",
     "~/Scripts/jquery.unobtrusive*",
     "~/Scripts/jquery.validate*",
     "~/Scripts/MvcFoolproofJQueryValidation.js",
     "~/Scripts/mvcfoolproof.unobtrusive.js",
     "~/Scripts/MvcFoolproofValidation.js"));

which renders as: (if its of any consequence)

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/MvcFoolproofJQueryValidation.js"></script>
<script src="/Scripts/mvcfoolproof.unobtrusive.js"></script>
<script src="/Scripts/MvcFoolproofValidation.js"></script>

Answer 1

The problem is because the order is incorrect. I had the same problem, but i resolve doing this order:

Bundles:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js",
    "~/Scripts/jquery.validate.min.js",
    "~/Scripts/jquery.validate.unobtrusive.min.js",
    "~/Scripts/blur.js"));

bundles.Add(new ScriptBundle("~/bundles/mvcfoolproof").Include(
    "~/Scripts/MicrosoftAjax.js",
    "~/Scripts/MicrosoftMvcAjax.js",
    "~/Scripts/MicrosoftMvcValidation.js",
    "~/Scripts/MvcFoolproofJQueryValidation.min.js",
    "~/Scripts/MvcFoolproofValidation.min.js",
    "~/Scripts/mvcfoolproof.unobtrusive.min.js"));

The View:

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/mvcfoolproof")

The render:

 <script src="/Scripts/jquery-ui-1.11.1.js"></script>
 <script src="/Scripts/jquery.validate.js"></script>
 <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
 <script src="/Scripts/MicrosoftAjax.js"></script>
 <script src="/Scripts/MicrosoftMvcAjax.js"></script>
 <script src="/Scripts/MicrosoftMvcValidation.js"></script>
 <script src="/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
 <script src="/Scripts/MvcFoolproofValidation.min.js"></script>
 <script src="/Scripts/mvcfoolproof.unobtrusive.min.js"></script>

And... the problem its gone.

See the documentation for check this order here.

Answer 2

You're not loading all 3 scripts are you? You are only supposed to load:

mvcfoolproof.unobtrusive.js AND (MvcFoolproofJQueryValidation.js OR MvcFoolproofValidation.js)

If you are loading all 3 scripts, can you stop loading the MvcFoolproofValidation.js script.

If you are just using mvcfoolproof.unobtrusive.js and MvcFoolproofValidation.js, can you swap to mvcfoolproof.unobtrusive.js and MvcFoolproofJQueryValidation.js