2

私はjQueryが初めてで、検証要素のスタイルをカスタマイズするという点で少し苦労しています(ASP.NET MVC3プロジェクト)。などの CSS を変更できることはわかっていますがfield-validation-error、input-validation-error達成したいことは次のとおりです (jQuery 1.5.1 と jQuery UI 1.8.11 を使用):

ラベルと入力要素の組み合わせの場合、検証が失敗したときにラベルの色を変更したいと思います (現在、入力要素の背景色のみが明るい赤に変わります)。さらに、入力要素の右側にエラー アイコンを表示し (これは機能します)、ツールチップとしてエラー メッセージを表示したいと思います (これは機能しません)。

さらに、フォームの送信ボタンにカーソルを合わせると、カスタム スタイルのツールチップとして検証の概要が表示されるようにしたいと思います (これを行う方法がわかりません)。

通常、フォームの検証は機能しますが、上記のように要素のスタイルを変更したいと考えています。私が得られないのは、validate関数が起動していないように見える理由です（ここでは、などから始めることができると思いましたerrorPlacement）。私のコードは次のとおりです。

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
$(document).ready( function()
{
    $("form").validate({
        debug: true,
        errorPlacement: function(error, element)
        {
            error.insertBefore(element);
        },
        submitHandler: function()
        {
            alert("submit");
        }
    });
});
[...]
@using(Html.BeginForm())
{
    [...]
    <td>@Html.LabelFor(model => model.SomeField)</td>
    <td>
        @Html.EditorFor(model => model.SomeField)
        @Html.ValidationMessagesFor(model => model.ValidFrom)
    </td>
    [...]
    @Html.ValidationSummary(false);
    <input id="btnSubmit" name="submit" type="submit" value="Send" />
}

submitHandler を設定debug: trueおよび定義しているにもかかわらずalert、Firefox の Web 開発者コンソールに (検証関連の) 出力が表示されません。alertフォームが有効なときに送信ボタンをクリックしてもメッセージが表示されず、サーバーに投稿されるだけです。また、フォームIDを明示的に設定し、jQueryで次のようにアクセスしようとしました：

$("#myForm")...
[...]
@using(Html.BeginForm("Action","Controler", FormMethod.Post, new { id = "myForm" }))
{
    [...]

残念ながら、これは何も変わりません。上記のように検証要素をスタイルするにはどうすればよいですか? validate関数が起動しないのはなぜですか?

4

2 に答える 2

1

クラスを入れてasp.net mvcのデフォルトデザインを変更してみる

例:

@Html.ValidationMessageFor(
          model => model.Property1, string.Empty, new 
          { 
              @class = "new-style-error-validation" 
          }
)
于 2013-05-03T07:54:46.647 に答える
0

これには本当に時間がかかり、やらなければならないこと、調べなければならないこと、修正しなければならないことがいくつか含まれていました。ただし、まず、執筆時点での最新バージョンに更新しましたjQuery (1.9.2)。jQuery UI (1.10.3)

まず第一に、質問で説明されているように、検証ロジックの動作を変更しようとするすべての試みがなぜなのか疑問に思っていました。ASP.NET MVC非常に多くのページにある「通常の」jQuery の例をそのまま使用することはできないため、最初にバリデーターへの参照を取得する必要があることが判明しました。

// #popupDialog and #Formular are the CSS ids of my modal dialog and form.
var validator = $("#popupDialog").find("#Formular").data("validator");

次のステップは、 を空の関数で上書きすることでしたerrorPlacement。そうしないと、元の検証スタイルが常にアクティブになります。

validator.settings.errorPlacement = function () {
};

ここで、実際の入力要素から派生した親/子要素を選択するだけで、実際の入力要素の前後の要素のスタイルを変更するのが簡単になりました。

validator.settings.highlight = function (element) {
    $(element).parent().parent().find("label:first").addClass("error");
    $(element).parent().parent().find("span.required").addClass("error");
    $(element).parent().parent().find("input:first").addClass("errorImage");
    $(element).parent().parent().find("select:first").addClass("errorImage");
    var errorMessage = $(element).attr("data-val-required");
    if (errorMessage) {
        $(element).parent().parent().find("input:first").attr("custom-error-message", errorMessage);
        $(element).parent().parent().find("select:first").attr("custom-error-message", errorMessage);
    }
};
validator.settings.unhighlight = function (element) {
    $(element).parent().parent().find("label:first").removeClass("error");
    $(element).parent().parent().find("span.required").removeClass("error");
    $(element).parent().parent().find("input:first").removeClass("errorImage");
    $(element).parent().parent().find("select:first").removeClass("errorImage");
    $(element).parent().parent().find("input:first").attr("custom-error-message", "");
    $(element).parent().parent().find("select:first").attr("custom-error-message", "");
};
validator.settings.errorContainer = "#btnSubmit";

title上記のコード行について注意すべきことの 1 つは、エラー メッセージに属性を使用しなかったことcustom-error-messageです (または、好きなように呼び出します)。これは、無効なコントロールで発生した問題が原因でした-コントロールが直接フォーカスを失ったため、矢印をクリックしてリストから項目を選択できDropDownListなくなりました（これは、jQueryで手動で設定したときにわかった問題でもあります経由ではありません）。title.attr(....prop(...

上記で使用した CSS クラスとスタイルは好きなものでかまいません。さらに、スタイルを設定したい要素は必要に応じて変更できます。必要な要素を選択するためのより簡単で安定した方法がおそらくありますが、基本的に上記の解決策は私にとってはうまくいくので、同様の問題がある場合はそれで十分です。

ボタンについてはsubmit、すべての無効なコントロールのエラー メッセージのリストではなく、静的なテキストを表示することにしましたが、動的なテキストを追加する必要がある場合は、以下で使用する方法が役立ちます。

$(document).tooltip({
    position:
        {
            my: "left bottom-15px",
            at: "center top",
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        },
    items: ".errorImage, input[type='submit']", // restrict to certain elements
    content: function () {
        var element = $(this);
        if (element.is("[custom-error-message]")) {
            return element.attr("custom-error-message");
        }
        else {
            if ($("#Formular").valid()) {
                return "";
            }
            else
            {
                return "<span class='error'>Input validation</span><br />Some informative text.";
            }
        }
    }
});

さらに質問がある場合は、お気軽に質問してください。私自身の経験から、このすべてを機能させるのはかなりの悪夢になる可能性があることを知っていますが、最終的にはそれほど難しくないように見えます.

于 2013-05-07T13:40:53.737 に答える