0x800a01b6 - JavaScript 実行時エラー: オブジェクトは 'validate' プロパティまたはメソッドをサポートしていません。

Question

お世話になります。

AzureのVM(Windows Server2012R2　ｘ64）の上で、

Visual Studio 2015 Update3 Pro. を使用して、VisualBasicのMVC5のWebアプリケーションを作成しています。

スクリプトは、ｊQuery 1.12.4 ｊQuery.Validation 1.15.0 bootstrap 3.3.6などを使用しています。

デバックでは、Chromeばかりを使用していたので気が付かなかったのですが、（つまり、Chromeではエラーにならないのですが）

Internet Explorerでデバックを実行してみると、タイトルに表記した

Microsoft Visual Basic
△！　ハンドルされない例外 下記ソースコードの行 2407、列 9 で発生しました。http://localhost:49409/
0x800a01b6 - JavaScript 実行時エラー: オブジェクトは 'validate' プロパティまたはメソッドをサポートしていません。
□この種類の例外がスローされると中断します
中断して例外設定を開く（S)
　　　　　　　　[中断（B)]   [継続（C)]   [無視（I)]

というVisual Studioの警告メッセージが現れます。継続すると、Internet Explorerには、所望のWebアプリが表示されます。

FirefoxやOperaでデバッグしても、警告メッセージは現れません。

また、ChromeやFirefoxやOperaでWebアプリを起動したまま、Internet Explorerで同じURL（例えば、http://localhost:49409/）
を表示させると、警告メッセージが現れません。

そこで、AzureのWebアプリに公開してみました。すると、どのブラウザでも、ヘッダーとフッター部分は正常に表示され、
JavaScriptを使用していないページ（home/about とか　home/contact）は、正常に表示されますが、
home/index だけが、@RenderBody()の部分に

エラー。

要求の処理中にエラーが発生しました。

と表示されます。エラーがでる部分のコードは、

<h2>消費材検索条件</h2>
<form class=”form-horizontal”>
    <div class="col-md-6">
        <lable for="Txb消費材名">&nbsp;消費材名：</lable>
        <input class="TextBox" id="Txb消費材名" type="text" />が含まれる。<br />
        <lable for="Txb生産者名">&nbsp;生産者名：</lable>
        <input class="TextBox" id="Txb生産者名" type="text" size="10" />が含まれる。<br />
        <lable for="Txb検体情報">&nbsp;検体情報：</lable>
        <input class="TextBox" id="Txb検体情報" type="text" size="10" />が含まれる。<br />
    </div>
    <div class="col-md-6">
        <lable for="Txb品目区分">&nbsp;品目区分：</lable>
        <input class="TextBox" id="Txb品目区分" type="text" size="10" />である。<br />
        <lable for="Txb産地">&nbsp;産地：</lable>
        <input class="TextBox" id="Txb産地" type="text" size="10" />が含まれる。<br />
        <lable for="Txb種別">&nbsp;種別：</lable>
        <input class="TextBox" id="Txb種別" type="text" size="10" />が含まれる。<br />
    </div>
    <div class="col-md-12">
        &nbsp;表示期間：<input class="TextBox" id="Txb開始日" type="text" size="10" />～
                        <input class="TextBox" id="Txb終了日" type="text" size="10" /><br />
    </div>

</form>

<h2>表示対象消費材の選択</h2>
<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
            <th>消費材名</th>
            <th>生産者名</th>
            <th>産地</th>
        </tr>
    </thead>
    <tbody id="消費材選択">
        @For Each item In Model.期間消費材("2016/5/1", "2016/5/31", "", "", "", "", "", "")
            @<tr>
                <td></td>
                <td>@item.消費材名</td>
                <td>@item.生産者名</td>
                <td>@item.産地</td>
            </tr>
        Next
    </tbody>
</table>

<script>
    $(function () {
        // 入力文字列の検査
        $(".TextBox").validate();

        $(".TextBox").change(function () {

        });

    });
</script>

のようなものです。

原因と対策について、教えてください。よろしくお願いします。

Answer 1

開発環境で満足に動かないうちに運用環境にデプロイしてまた問題が出て、それが開発環境で出ている問題と同じなのか、別の問題なのかも分からないのでは発散するばかりです。

まずは開発環境で、それをできるだけ運用環境に近くして（IIS Express は使わないでローカル IIS を使うとか）、完璧に動くようにしませんか？

それから、エラーメッセージ「0x800a01b6 - JavaScript 実行時エラー」でググると参考になりそうな記事がいくつもヒットしますがやってみましたか？　例えば下記：

Visual Studio 2013proで簡単なweb作成後、デバッグ時に0x800a01b6 - Microsoft JScript
実行時エラーがでるのは、なぜ
http://q.hatena.ne.jp/1417661163

jQuery UI エラー 0x800a01b6
https://hirofromcanadauofl.wordpress.com/2013/06/30/01/

もしまだならやってみましょう。

それらの記事を参考に、ある程度質問者さんの方で切り分けしてから（一番いいのが今のコードをどんどん削っていって、問題を再現するのに必要最低限にすることです）質問した方が解決が早いのではないかと思います。

【追伸】

今回の問題とは関係ないかもしれませんが、ASP.NET MVC のモデルのプロパティ名、コントローラーのアクションメソッド名、その引数名などに日本語を使うのは止めた方がいいと思います。

その影響が C# や VB.NET のコードの範囲に留まらず、思わぬ副作用があるかもしれないからです。詳しくは以下の記事を見てください。

識別子名に日本語
http://surferonwww.info/BlogEngine/post/2015/03/17/japanese-name-for-identifiers-such-as-variables-methods-and-properties.aspx

html 要素の id などにも日本語を使うのは止めた方がいいかもしれません。どこで何がどう影響するかわかりませんので。

検証すれば済むかもしれませんが、それは余計な気苦労と不要な手間だと思います。そこまでして日本語を使う理由はないのでは？

Answer 2

SurferOnWwwさま

ご指摘、ありがとうございます。

＞エラーメッセージ「0x800a01b6 - JavaScript 実行時エラー」でググると参考になりそうな記事がいくつもヒットします。
について、似たような検索はいくつか試みてから質問しています。（その後も更にやってみました。）

試してみたけれど効果がなかったことは、以下の通りです。

（1）_Layout.vbhtml　で、

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required:=False)

を<footer>の後ろから<header>の前に移動してみましたが、影響はありませんでした。

（2）jQueryのバージョンをｊQuery.Validateの公開日より3か月前のものにしてみましたが、影響はありませんでした。

自分の一番の関心ごとは、他のブラウザでは問題ないのに、Inernet Explorerだけが警告メッセージを吐くのはなぜかということです。
しかも、警告を無視して継続すると、問題なく動作します。つまり、余分な警告ではないのかということです。

それから、日本語の識別子は自分の趣味ですので、気になったら見逃してください。すみません。

Answer 3

> 自分の一番の関心ごとは、他のブラウザでは問題ないのに、Inernet Explorerだけが警告メッセージ
> を吐くのはなぜかということです。

それはあなたがここで提供した情報だけでは私には分かりません。

想像力をたくましくすると、全てのブラウザで同様に問題が起こっているのに、IE 以外では警告メッセージが出ないのではないかということです。

IE 以外のブラウザでは validate が定義されて問題が起こらないということは考えにくいと思いませんか？

> しかも、警告を無視して継続すると、問題なく動作します。つまり、余分な警告ではないのかという
> ことです。

これも想像ですが、例えば validate でクライアントサイドでの検証を行っているとすると、それがスルーされても問題なく動くというようなことはあるでしょう。

> それから、日本語の識別子は自分の趣味ですので、気になったら見逃してください。すみません。

せっかく情報を提供しているのに無視されては・・・　まぁ、趣味ならご自由にどうぞと言うしかないのかもしれません。

Answer 4

もう一つ想像を膨らませてレスします。

View に以下のコードが入っていないのでは？

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

普通に MVC アプリをテンプレートで作った場合、上記コードが View にないと validate メソッドが定義されている外部スクリプトファイル jquery.validate.js への参照が HTML ソースに定義されないはず。

そのあたりの仕組みの詳しい説明は以下の記事を見てください。

クライアント側検証の無効化
http://surferonwww.info/BlogEngine/post/2015/02/17/disable-client-side-validation-in-mvc4-internet-application.aspx

上記の想像が当たっているとすると、その前の想像「全てのブラウザで同様に問題が起こっているのに、IE 以外では警告メッセージが出ないのではないかということです」も当たっていると思います。

Answer 5

SurferOnWwwさま

ありがとうございました。拙い質問のなかで想像を巡らしていただき、原因を指摘していただき感謝しています。

スクリプト類の読み込みは、共通レイアウトの_Layout.vbhtmlの最後の部分で行っているのですが、
ご指摘のとおり、@Scripts.Render("~/bundles/jqueryval")がありませんでした。
そこで、これを補うことにより、エラーの発生もなくなりました。

@Scripts.Render("~/bundles/jquery")のなかでValidateも読み込んでくれているという思い込みがありました。
ご指摘ありがとうございます。

また、Internet Explorerが余分な警告を吐くというのも思い込みで、他のブラウザのほうが不親切であったということも
わかりました。

すべての疑問が氷解しました。回答にマークをつけさせていただきました。

重ねて、ありがとうございます。

Answer 6

> スクリプト類の読み込みは、共通レイアウトの_Layout.vbhtmlの最後の部分で行っているのですが、
> ご指摘のとおり、@Scripts.Render("~/bundles/jqueryval")がありませんでした。
> そこで、これを補うことにより、エラーの発生もなくなりました。

検証用のスクリプトはユーザー入力を送信してくる View でしか必要ないものなので、私が上のレスで書いたようなコードで View で追加した方がいいと思います。

また、ユーザー入力の検証は Model のプロパティにデータアノテーション属性を付与して、それを利用するのが ASP.NET MVC アプリでは標準＆お勧めです。

標準に準拠した作り方をすれば Visual Studio のウィザードがかなりのところまで自動でやってくれますので、今回のような問題に悩むことはなかったかもしれません。

記事としてはちょっと古いのですが、Microsoft が提供する以下のチュートリアルがまとまっていて理解しやすいと思いますので一読されることをお勧めします。

[C#] #21. データ アノテーション検証コントロールでの検証
https://technet.microsoft.com/ja-jp/subscriptions/ff642519.aspx

例えば、上記の記事の Model のサンプルコード（正規表現の文字列の前の @ が抜けているので注意）をベースに以下のような Controller を作ります。

namespace Mvc4App2.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Mvc4App2.Models.Product product)
        {
            if (ModelState.IsValid)
            {
                // product にバインドされたユーザー入力を DB
                // に INSERT する等の処置

                return RedirectToAction("Index", "Home");
            }            
            return View(product);            
        }
    }
}

それをベースに以下のような設定で View を自動生成させます。［スクリプト ライブラリを参照(R)］にチェックを入れる（デフォルトでチェックが入っているはず）ところに注意。

そうすれば以下のようなコードが生成され、クライアント側でのスクリプトによる検証も自動的に行われるようになります。（@Html.AntiForgeryToken() は自動的には追加されないのでそれは自力で追加する必要があります）

@model Mvc4App2.Models.Product

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

@using (Html.BeginForm()) {    
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Product</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UnitPrice)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UnitPrice)
            @Html.ValidationMessageFor(model => model.UnitPrice)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 7

SuferOnWwwさま

ありがとうございます。使用しているのがVisualStudio2015Update3のMVC5なので、少しずつ違う様子です。

例えば、Viewの追加画面は、画像が登録できるといいのですが、拒絶されるので、テキストに直すと、

　　　　　ビューの追加
ビュー名（N)：　TestView
テンプレート（T)：　Empty
モデル　クラス（M):　foodsResult
データコンテキストクラス（D)：　SQL放射能
オプション：
　□部分ビューとして作成
　■スクリプトライブラリーの参照
　■レイアウトページの使用

　（Razor _viewstartで指定する場合は空白のままにしてください。）

　　　　　　　［追加］　[キャンセル]

のようにして、■スクリプトライブラリーの参照にチェックをいれても、

@ModelType ScRad.WebUser
@Code
    ViewData("Title") = "TestView"
End Code

<h2>TestView</h2>

のようなTextView.vbhtmlが追加されます。ここには、ご指摘の

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

はありませんでした。

＞[C#] #21. データ アノテーション検証コントロールでの検証
＞https://technet.microsoft.com/ja-jp/subscriptions/ff642519.aspx
の勉強はさせていただきます。ありがとうございます。

Answer 8

> 使用しているのがVisualStudio2015Update3のMVC5なので、少しずつ違う様子です。

少しは違うのは確かだと思いますが、先のレスで紹介したような機能はバージョンアップによって進化することはあっても退化することはないはずなので、質問者さんの VS2015 MVC5 でうまく行かないのはやり方の問題だと思いますが・・・

> テンプレート（T)：　Empty

上記の部分は、多分自分の VS2010 MVC4 の場合は下の画像の赤枠の部分に該当すると思いますが、それを私の先のレスの画像のように Create にしてみたらどうなりますか？

ちなみに自分の環境でも Empty の場合に生成される View のコードは質問者さんのものとほぼ同じで、以下のようになります（自分のコードは VB.NET ではなく C# ですので注意）。

@model Mvc4App2.Models.Product

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

＃一度、本や Web などのチュートリアルに従ってアプリを作ってみるなど体系的な勉強をすることをお勧めします。Entity Framework を使った Model ができていると、もっと簡単に、自力では一行もコードを書かずに作成できるはずです。

Answer 9

ありがとうございました。