4

Microsoft が提供する控えめな検証を使用して、ASP.NET MVC 3 プロジェクトで errorPlacement JQuery Validate プラグインを処理しようとしています。errorPlacement 関数をヒットすることができず、何が間違っているのかわかりません。以下のモデル/ビュー/コントローラーのコードを提供しています。私が間違っていることを教えてください。

意見

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Project.Models.SampleModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
</head>
<body>
    <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript">

         $(document).ready(function ()
    {
        $("#form").validate(
      {
          errorPlacement: function (error, element)
          {
              alert("Code to define customer error");
          }
      })

    });
    </script>
    <% using (Html.BeginForm("Index", "Sample", FormMethod.Post, new { id = "form" }))
       { %>
    <%: Html.ValidationSummary(false) %>
    <fieldset>
        <legend>NewModel</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Name) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Age) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Age) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Address) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Address) %>
        </div>
        <br />
        <p>
            <input type="submit" id="submit" value="Submit" />
        </p>
    </fieldset>
    <% } %>
</body>
</html>




モデル

public class SampleModel
    {


        [Required]
        [DataType(DataType.Text)]
        [DisplayName("Name")]
        public string Name { get; set; }

        [Required]
        [DataType(DataType.Text)]
        [DisplayName("Age")]
        public string Age { get; set; }

        [Required]
        [DataType(DataType.MultilineText)]
        [DisplayName("Address")]
        public string Address { get; set; }


    }


コントローラ

public class SampleController : Controller
    {
        //
        // GET: /New/

        public ActionResult Index()
        {
            return View();
        }

    }
4

7 に答える 7

5

この問題に対処する記事をここで見つけました。

要するに：

var valOpts = $.data($('form')[0], 'validator').settings; //we've got jQuery.validation settings woohoo!
var baseError = valOpts.errorPlacement;
valOpts.errorPlacement = function (error, input) {
    input.attr('title', error.text()); //error is the $('<span>...</span>')
    baseError(error, input); //removing this breaks form validation
};
于 2011-11-08T13:47:46.037 に答える
2

MVC3 では、Microsoft は組み込みの検証に jQuery 検証プラグインを使用します。使用法は jquery.validate.unobtrusive.min.js にあります。そこで OnError を見つけて、そのロジックを変更します。

function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);

        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
        }
        else {
            error.hide();
        }
    }
于 2011-03-22T19:24:49.577 に答える
0

同様の問題を抱えている間、私は解決策を見つけました。これが私の解決策です。私は自分の質問にリンクし、以下の回答をコピーします。これがあなたが探しているものであることを願っています：

qTipとMVC3およびjQuery検証の統合（errorPlacement）

1）まず、マイクロソフトが提供するスクリプトjquery.validate.unobtrusive.jsを見つけます。

2）次に、スクリプトで関数validationInfo（form）を見つけ、オプション構造のerrorPlacement命令を、qTipまたは任意のオプションで提供される命令に置き換えます。

3）検証の処理方法で変更したいスタイルやその他のオプションについても同じことが言えます。

4）必要なすべての必要なファイルを含めます。

これが同様の問題を抱えている人に役立つことを願っています。

サンプルコード：

function validationInfo(form) {
    var $form = $(form),
        result = $form.data(data_validation);

    if (!result) {
        result = {
            options: {  // options structure passed to jQuery Validate's validate() method
                //errorClass: "input-validation-error",
                errorClass: "error",
                errorElement: "span",
                //errorPlacement: $.proxy(onError, form),
                errorPlacement: function (onError, form) {
                    var error = onError;
                    var element = form;
                    // Set positioning based on the elements position in the form
                    var elem = $(element),
                        corners = ['left center', 'right center'],
                        flipIt = elem.parents('span.right').length > 0;

                    // Check we have a valid error message
                    if (!error.is(':empty')) {
                        // Apply the tooltip only if it isn't valid
                        elem.filter(':not(.valid)').qtip({
                            overwrite: false,
                            content: error,
                            position: {
                                my: corners[flipIt ? 0 : 1],
                                at: corners[flipIt ? 1 : 0],
                                viewport: $(window)
                            },
                            show: {
                                event: false,
                                ready: true
                            },
                            hide: false,
                            style: {
                                classes: 'ui-tooltip-red' // Make it red... the classic error colour!
                            }
                        })

                        // If we have a tooltip on this element already, just update its content
                        .qtip('option', 'content.text', error);
                    }

                    // If the error is empty, remove the qTip
                    else { elem.qtip('destroy'); }
                },
                invalidHandler: $.proxy(onErrors, form),
                messages: {},
                rules: {},
                success: $.proxy(onSuccess, form)
            },
            attachValidation: function () {
                $form.validate(this.options);
            },
            validate: function () {  // a validation function that is called by unobtrusive Ajax
                $form.validate();
                return $form.valid();
            }
        };
        $form.data(data_validation, result);
    }

    return result;
}
于 2011-07-25T15:47:19.690 に答える
0

多くの投稿を読んで答えを見つけようとした後、エラー配置を機能させることができませんでした。MVC 4 アプリケーションで Twitter ブートストラップを使用しており、エラー クラスをコントロール グループ div に配置して、エラーが発生したときに赤くする方法が必要でした。

初期化された jquery バリデータ オブジェクトにフォームからアクセスできませんでした。

実際、Web サイトで検証を初期化するときに、設定を jQuery 検証に渡すことができることがわかっています。しかし、MVCでは自動的に行われます（どこで行われるかはわかりません）

とにかく、この初期化されたオブジェクトが見つかった場合は、設定を拡張して独自の関数を渡し、ハイライト、ハイライト解除、showErrors などを実行できます。

これを行う方法

jQuery.validator は、既に初期化されている検証オブジェクトのインスタンスを提供しました。そのオブジェクトには、setDefaults という関数があります。カスタマイズしたい関数を含む設定オブジェクトを作成できます。以下の例

$(function () {
        var settings = {
            highlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
            }
        }

        if (jQuery.validator) {
            jQuery.validator.setDefaults(settings);
        }
});
于 2013-01-11T12:13:07.153 に答える
0

投稿時にコードが少し壊れているように見えますが、試してみます。あなたのjQueryコードは私には良さそうです。

jquery および jquery バリデータ ライブラリを含めましたか? $(document).ready? 内でコードを実行していますか? 無効なフィールドがありますか? エラーが発生した場合にのみアラートが呼び出されます。無効なフィールドで送信を押すことでトリガーできます。

于 2011-02-16T17:38:57.857 に答える
0

カスタム コードとオプションは、jquery.validate の後、jquery.validate.unobtrusive の前にロードする必要があります。

于 2015-10-22T15:55:56.037 に答える
0

に置き換えてみてくださいjquery.unobtrusive-ajax.min.js。

それは私にとってはうまくいきましたが、将来どのようなエラーが発生する可能性があるかわかりませんでした。

于 2012-09-06T03:49:06.263 に答える