5

HTML.ValidationMessage（）要素を利用して、jQueryを使用した非常にカスタムなクライアント側の検証を記述しようとしています。これも可能ですか？サーバー側の検証はHTML.ValidationMessage（）を使用して表示されますが、フォームを送信する前に、その要素にアクセスしてjQueryを使用してカスタムメッセージを表示するにはどうすればよいでしょうか。

このようなことを行うためのプラグインがいくつかあることは知っていますが、検証で完全に制御したいと思っています。

これが私が現在持っているJavascriptコードのビットです。基本的に、送信時に入力要素に検証「クラス」を追加しますが、Html.ValidationMessageにアクセスして「Emailrequired」などを出力する方法がわかりません。

    <script type="text/javascript">
    $(document).ready(function() {
        $("input[type=submit]").click(function() {

            var valid = true;

            // email blank
            if ($("input[name='email']").val().length < 1) {
                $("input[name='email']").addClass("input-validation-error");
                valid = false;
            }

            return valid;
        })
    });

</script>

そしてビューからのコード：

       <p>
            <label for="email">
                Email:</label>
            <%= Html.TextBox("email") %>
            <%= Html.ValidationMessage("email") %>
        </p>
4

4 に答える 4

8

これを行うには、大量のコードを作成できます。または、無料でまさにこれを行うxValを使用することもできます。.NET 型に値の注釈を付け、aspx にいくつかの単純なものを追加すると、jQuery の検証が無料で行われます。さらに、一般的なフレームワークのプロバイダーが付属しており、より複雑な検証が必要な場合に備えて非常にカスタマイズ可能です.

ここで車輪を再発明する必要はないと思います。

于 2009-03-19T14:02:15.243 に答える
2

クライアント側にjquery フォーム検証プラグインを使用するだけでよいでしょうか? ビュー コードでの実装は簡単です。入力ボックスにいくつかのタグを追加し、ヘッダーに数行の JavaScript を追加すれば完了です。もちろん、いわば「非常にカスタム」なものをコーディングする必要があります。

于 2009-03-19T15:00:33.527 に答える
1

メッセージをページに静的に配置し、その表示を「なし」に設定すると、入力フィールドのクラスを変更すると同時にそのメッセージを表示できます。

    <p>
        <label for="email">
            Email:</label>
        <%= Html.TextBox("email") %><span style="display:none" class="email-error">Email required</span>
        <%= Html.ValidationMessage("email") %>
    </p>

次に、JS で、この行を部分変更の下に追加します。

        if ($("input[name='email']").val().length < 1) {
            $("input[name='email']").addClass("input-validation-error");
            valid = false;
        }

これに：

        if ($("input[name='email']").val().length < 1) {
            $("input[name='email']").addClass("input-validation-error");
            $("span.email-error").show();
            valid = false;
        }

それに応じてそのようなものを配置するためにいくつかの CSS が必要になる場合がありますが、機能的には必要なことを行う必要があります。

編集：

余分なマークアップの置き換えを避けるには:

$("span.email-error").show();

と：

$("input[name='email']").after('<span style="display:none" class="email-error">Email required</span>');
于 2009-03-19T13:48:16.447 に答える
0

ValidatedTextBox である HtmlHelper を作成します。モデルのリフレクションを使用してこれを行い、検証を使用して完全に動的な jQuery 統合を作成しましたが、より単純なバージョンは次のように機能します (これはおそらく機能しますが、現状ではテストされていません)。開始するのに適した場所:

public static MvcForm BeginClientValidatedForm(this HtmlHelper helper, string formId)
{
    HttpResponseBase response = helper.ViewContext.HttpContext.Response;
    if (helper.ViewData.ModelState.IsValid)
    {
        response.Write("<ul class=\"validation-summary-errors\"></ul>\n\n");
    }

    response.Write(ClientValidationHelper.GetFormValidationScript(formId));
    response.Write("\n");

    // Inject the standard form into the httpResponse.
    var builder = new TagBuilder("form");
    builder.Attributes["id"] = formId;
    builder.Attributes["name"] = formId;
    builder.Attributes["action"] = helper.ViewContext.HttpContext.Request.Url.ToString();
    builder.Attributes["method"] = HtmlHelper.GetFormMethodString(FormMethod.Post);
    response.Write(builder.ToString(TagRenderMode.StartTag));

    return new MvcForm(response);
}

対応する「GetFormValidationScript」:

public static string GetFormValidationScript(string formId)
  {
    string scriptBlock =
    @"<script type=""text/javascript"">
    $(document).ready(function() {{
      $(""#{0}"").validate({{
        meta:""rules"",
        onkeyup:false,
        onfocusout:false,
        onclick:false,
        errorClass:""input-validation-error"",
        errorElement:""li"",
        errorLabelContainer:""ul.validation-summary-errors"",
        showErrors: function(errorMap, errorList) {{
            $(""ul.validation-summary-errors"").html("""");
            this.defaultShowErrors();
      }}";

      // etc...this is the standard jQuery.validate code.

      return string.Format(scriptBlock, formId);


  }

public static string ClientValidatedTextbox(this HtmlHelper htmlHelper, string propertyName, IDictionary<string, object> htmlAttributes, string validationType)
{
    var cssClassBuilder = new StringBuilder();
    cssClassBuilder.Append("text ");
    if (htmlAttributes == null)
    {
        htmlAttributes = new Dictionary<string, object>();
    }
    else if(htmlAttributes.ContainsKey("class"))
    {
        cssClassBuilder.Append(htmlAttributes["class"]);
    }

    switch validationType
    {
      case "email":
        cssClassBuilder.Append(" {rules: {email: true, messages: {email: 'A valid email is required.'}} } ");
        break;
    }

    htmlAttributes["class"] = cssClassBuilder.ToString();

    return htmlHelper.TextBox(propertyName, htmlAttributes);
}
于 2009-03-19T13:52:37.543 に答える