1

約 400 の入力フィールドを持つマスクがあり、すべてクライアントにロードされます。マスクは、ユーザーが必要なすべてのフィールドを直接表示および編集できるように、いくつかのタブとアコーディオンで構成されています。編集の最後に、クライアントでマスクが検証されます。

タブとアコーディオンにはjQuery UIを使用し、クライアントの検証にはjQuery Validation Pluginを使用します。サーバー上で ASP.NET MVC を実行します。必要な属性を含む HTML を生成するには、data-val-*さまざまな手法を使用します。

  • デフォルトの EditorFor ヘルパー関数 ( @Html.EditorFor(model => model.property)
  • 特定の TextBoxFor、DropDownListFor ヘルパー関数 (`@Html.EditorFor(model => model.property')

  • 特定の書式設定が必要な場合のカスタム HTML タグ:

    <input 
    class="text-box single-line" 
    data-val="true" 
    data-val-number="The field @data.Title must be a number." 
    id="@data.Name" 
    name="@data.Name" 
    type="text" 
    value="@data.Value" @(data.IsDisabled ? "disabled='disabled'" : string.Empty ) />

ただし、拡張機能は使用しません。生成されたフィールドはすべて非常によく似ています。例:

<input name="fieldName" 
       class="text-box single-line valid" 
       id="fieldName" 
       type="text" 
       value="311969d" 
       data-val="true" 
       data-val-length-max="8" 
       data-val-length="The field fieldName must be a string with a maximum length of 8.">

この入力を 8 文字以上に変更するvalueと、フィールドが赤くマークされ、エラーが表示され、すべてがうまく機能します。

ただし、送信を押すと、検証に約12.5秒かかります-これはIEから取得したものです-プロファイラー:

実行された 1 つの検証ラウンドの IE プロファイラーのスクリーンショット

この質問を更新する前に多くの人がコメントで述べたように、DOM 操作により実行が非常に遅くなりますが、jQuery-Validation プラグインが HTML ページに新しい要素を追加する理由がわかりません。showLabelここでは、DOM 操作を実行する関数を確認できます。

showLabel: function(element, message) {
    var label = this.errorsFor( element );
    if ( label.length ) {
        // refresh error/success class
        label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );

        // check if we have a generated label, replace the message then
        label.attr("generated") && label.html(message);
    } else {
        // create label
        label = $("<" + this.settings.errorElement + "/>")
            .attr({"for":  this.idOrName(element), generated: true})
            .addClass(this.settings.errorClass)
            .html(message || "");
        if ( this.settings.wrapper ) {
            // make sure the element is visible, even in IE
            // actually showing the wrapped element is handled elsewhere
            label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
        }
        if ( !this.labelContainer.append(label).length )
            this.settings.errorPlacement
                ? this.settings.errorPlacement(label, $(element) )
                : label.insertAfter(element);
    }
    if ( !message && this.settings.success ) {
        label.text("");
        typeof this.settings.success == "string"
            ? label.addClass( this.settings.success )
            : this.settings.success( label );
    }
    this.toShow = this.toShow.add(label);
},

ただし、興味深いことに、エラー ラベルまたは同様のものが表示されるか、DOM に表示されるようになりました。また、マスクにはラベルを表示するスペースがないため、実際にはラベルを表示したくありません。最新のブラウザーと HTML 5 検証のほとんどで機能するため、エラーが表示される場合はツールヒント テキストを使用することをお勧めします。

短期的な解決策として、何らかの形で (このマスクのみ) DOM 操作を無効にできるとよいでしょう。いくつかの構成で可能ですか？

より洗練されたソリューションは、JavaScript の代わりに HTML 5 検証を使用することです。これは、お客様が既に IE 9 または 10 を使用しており、必要に応じて、それをサポートする 10 にアップグレードできるためです。私は昨年 11 月に SO の質問を見つけました: W3C 仕様による ASP.NET MVC 5 および HTML 5 フォーム属性- 何かが変更されたか、このように変更される予定ですか? すべてのフィールドを手動で実装するのは大変な作業になるためです。

4

2 に答える 2

0

どのブラウザーをサポートする必要がありますか? 新しいブラウザーでは、 HTML5 フォーム検証を使用できます。

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i_like" pattern="banana|cherry">
  <button>Submit</button>
</form>

また、古いブラウザーのフォールバックとして、検証スクリプトを含めることができます。

于 2014-04-01T15:06:40.487 に答える