web-dev-qa-db-ja.com

ASP.NET検証が失敗したときにテキストボックスのcssクラスを変更する

テキストボックスに接続された必須フィールドバリデーターがクライアント側の検証に失敗した場合、JavaScriptを実行するにはどうすればよいですか？私がやろうとしているのは、テキストボックスのcssクラスを変更して、テキストボックスの境界線を赤く表示することです。

私はWebフォームを使用していますが、jqueryライブラリを利用できます。

asp.netjavascriptjqueryvalidationwebforms
21
Travis Collins

これは速くて汚いものです（しかしそれはうまくいきます！）

<form id="form1" runat="server">
      <asp:TextBox ID="txtOne" runat="server" />
      <asp:RequiredFieldValidator ID="rfv" runat="server" 
                                 ControlToValidate="txtOne" Text="SomeText 1" />
      <asp:TextBox ID="txtTwo" runat="server" />
      <asp:RequiredFieldValidator ID="rfv2" runat="server" 
                                 ControlToValidate="txtTwo" Text="SomeText 2" />
      <asp:Button ID="btnOne" runat="server" OnClientClick="return BtnClick();" 
                                         Text="Click" CausesValidation="true" />
    </form>
    <script type="text/javascript">
        function BtnClick() {
            //var v1 = "#<%= rfv.ClientID %>";
            //var v2 = "#<%= rfv2.ClientID %>";
            var val = Page_ClientValidate();
            if (!val) {
                var i = 0;
                for (; i < Page_Validators.length; i++) {
                    if (!Page_Validators[i].isvalid) {
                        $("#" + Page_Validators[i].controltovalidate)
                         .css("background-color", "red");
                    }
                }
            }            
            return val;
        }
    </script>
25
TheVillageIdiot

次のスクリプトを使用できます。

<script>

    $(function(){
        if (typeof ValidatorUpdateDisplay != 'undefined') {
            var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;

            ValidatorUpdateDisplay = function (val) {
                if (!val.isvalid) {
                    $("#" + val.controltovalidate).css("border", "2px solid red");
                }

                originalValidatorUpdateDisplay(val);
            }
        }
    });

</script>

このコードは、バリデーターの表示を更新し、必要に応じてcontroltovalidateを更新する元のValidatorUpdateDisplay関数を装飾します。

お役に立てれば、

20
gsimoes

Custom Validator を使用してから、ClientValidationFunctionを使用することをお勧めします...失敗したときにcssクラスを追加すると便利です。

2
Tom Ritter

少し前に私はそれに数時間を費やし、それ以来私はこれを達成するためにいくつかのカスタムjsマジックを使用しています。

実際、非常に単純で、ASP.NET検証が機能する方法です。基本的な考え方は、cssクラスを追加して、視覚的なフィードバックをすばやく必要とする各コントロールにjavascriptイベントを添付することです。

<script type="text/javascript" language="javascript">
    /* Color ASP NET validation */
    function validateColor(obj) {
         var valid = obj.Validators;
         var isValid = true;

         for (i in valid)
              if (!valid[i].isvalid)
                  isValid = false;

         if (!isValid)
             $(obj).addClass('novalid', 1000);
         else
             $(obj).removeClass('novalid', 1000);
    }

    $(document).ready(function() {
        $(".validateColor").change(function() {validateColor(this);});
    });
</script>

たとえば、これはASP.Netテキストボックスコントロールに追加するコードになります。はい、必要な数だけ入力できます。これは、CssClass値を追加することを意味するだけです。

<asp:TextBox ID="txtBxEmail" runat="server" CssClass="validateColor" />

これは、作業コントロールに変更があった場合にASP.Netクライアント側の検証をトリガーし、有効でない場合はcssクラスを適用します。したがって、視覚化をカスタマイズするには、CSSを利用できます。

.novalid {
    border: 2px solid #D00000;
}

それは完璧ではありませんが、ほぼ:)そして少なくともあなたのコードは余分なものに悩まされることはありません。そして、最高は、あらゆる種類のAsp.Netバリデーター、イベントカスタムバリデーターで動作します。

私はこのグーグルのようなものを見たことがないので、あなたと私のトリックを共有したくありません。それが役に立てば幸い。

サーバー側の余分なもの：

これをしばらく使用した後、この方法でサーバー側でしかチェックできない可能性があるものについて特定の検証が必要な場合は、コードビハインドからこの「.novalid」cssクラスも追加します。

Page.Validate();
    if (!requiredFecha.IsValid || !CustomValidateFecha.IsValid)
        txtFecha.CssClass = "validateColor novalid";
    else
        txtFecha.CssClass = "validateColor";
0
guillem

これが私の解決策です。

他のソリューションに対する利点：

  • ASP.NETとシームレスに統合します-コードに変更を加える必要はありません。マスターページのページ読み込み時にメソッドを呼び出すだけです。
  • テキストボックスまたはコントロールが変更されたときにCSSクラスを自動的に変更します

短所：

  • ASP.NETJavaScriptコードのいくつかの内部機能を使用します
  • ASP.NET4.0でのみテスト済み

使い方：

  • JQueryが必要
  • ページが読み込まれたときに「Validation_Load」関数を呼び出します

  • 「control_validation_error」CSSクラスを宣言します

    function Validation_Load() {
if (typeof (Page_Validators) != "object") {
    return;
}

for (var i = 0; i < Page_Validators.length; i++) {
    var val = Page_Validators[i];
    var control = $("#" + val.controltovalidate);
    if (control.length > 0) {
        var tagName = control[0].tagName;
        if (tagName != "INPUT" && tagName != "TEXTAREA" && tagName != "SELECT") {
            // Validate sub controls
        }
        else {
            // Validate the control
            control.change(function () {
                var validators = this.Validators;
                if (typeof (validators) == "object") {
                    var isvalid = true;
                    for (var k = 0; k < validators.length; k++) {
                        var val = validators[k];
                        if (val.isvalid != true) {
                            isvalid = false;
                            break;
                        }
                    }
                    if (isvalid == true) {
                        // Clear the error
                        $(this).removeClass("control_validation_error");
                    }
                    else {
                        // Show the error
                        $(this).addClass("control_validation_error");
                    }
                }
            });
        }
    }
}
}
0
Coder