web-dev-qa-db-ja.com

jQueryValidate-親Divにエラークラスを追加

JQuery Validateプラグインを使用していますが、チェックボックスのエラーを表示する良い方法を見つけることができません。何も選択されていない場合は、すべてのチェックボックスラベルを赤で強調表示し、チェックボックスとチェックボックスラベルを含むdivにエラークラスを追加してこれを行うことにします。ただし、クラスを追加しているようには見えません。 divを正しく選択していませんか？

HTML：

<div class="left-aligned indent">

    <label id="id_label" for="id" class="label">Items:</label>

    <div class="select-group">

        <input type="checkbox" name="items" value="1" id="item_1" />
        <label class="checkbox">Item #1</label><br />

        <input type="checkbox" name="items" value="1" id="item_2" />
        <label class="checkbox">Item #2</label><br />

        <input type="checkbox" name="items" value="1" id="item_3" />
        <label class="checkbox">Item #3</label><br />

    </div>

</div>

Javascript：

$().ready(function() {

    $('#addForm').validate({
        rules: { 
            "items": { 
                required: true, 
                minlength: 1 
            } 
        }, 
        errorPlacement: function(error, element) {
            if (element.is(':checkbox')) {
                $(this).prev("div").addClass('checkbox-error');
            }
            else {
                 return true;
            }
         }
    }); 


});

CSS：

.error {
    background-color: #FF898D;
    border: 1px solid #000;
}

.checkbox-error {
    color: #FF898D;
}
javascriptjquerycssjquery-validate
11
Michael
$(element).parent('div').addClass('checkbox-error');
7
user1012851

これは機能するはずです：

    $('#myform').validate({
    highlight: function(element) {
        $(element).parent().addClass("field-error");
    },
    unhighlight: function(element) {
        $(element).parent().removeClass("field-error");
    }
    });

その他のオプションについては、ドキュメントを確認してください。

44
Luis Evrythng

jquery検証を使用して検証エラーが発生した場合は親divにクラスを追加 に関する私の回答から、この質問に対する既存の回答に価値が追加されると信じているため...

バリデーター設定へのアクセス

ビジネスの最初の順序は、フォームのバリデーターのsettingsオブジェクトを変更することです。これは、次のいずれかの方法で実行できます。

  1. jQuery.validator.setDefaults() を呼び出して、フォームがすべてのフォームにロードされる前
  2. .validate([options]) のオプションを渡してフォームを初期化する場合
  3. フォーム上でバリデーターオブジェクトを $("form").data("validator").settings で検索して初期化した後

MVCを使用しているので、オプション＃2は問題外です。 nobtrusive-validation がフォームを自動的に初期化するからです。それでは、今後はオプション3を使用しましょう。ここでの目標は、フォームの設定をカスタマイズできるようにすることだけです。

デフォルトの動作を上書きする

変更するデフォルトのメソッドは highlight および unhighlight で、highlight無効なフィールド、またはハイライトオプションによって行われた変更をそれぞれ元に戻します。デフォルトの動作は次のとおりです ソースコードによる ：

highlight: function( element, errorClass, validClass ) {
    if ( element.type === "radio" ) {
        this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
    } else {
        $( element ).addClass( errorClass ).removeClass( validClass );
    }
},
unhighlight: function( element, errorClass, validClass ) {
    if ( element.type === "radio" ) {
        this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
    } else {
        $( element ).removeClass( errorClass ).addClass( validClass );
    }
}

したがって、ここにもいくつかのオプションがあります。

  1. それらの関数を完全に置き換えて、自分で記述してください
  2. これらの関数をラップして通常のように呼び出しますが、前後に独自のカスタムコードを追加します。

オプション1-卸売りを交換

このルートはとても簡単です。そこに好きなものを書いてください。たぶんソースコードからシードするかもしれませんし、あなた自身のことをするかもしれません。

var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }

オプション2-ラップ機能

これは邪魔にならないので、ほとんどの場合おそらく望ましいでしょう。

最終的にはvalSettings.highlightの値を置き換えるため、元の関数のクリーンな元のバージョンにアクセスする必要があります。自分で保存するか、グローバルデフォルトから1つ取得することができます

// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight

JavaScript関数のラッピングに関しては、いくつかの例があります ここ 、 ここ 、および ここ ）。これらの1つから解析された例を次に示します。これは、関数呼び出し間でthisコンテキストをバインドし、渡される引数のアリティを保持し、戻り値を保持するのに役立ちます。

function wrap(functionToWrap, beforeFunction) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
    };
};

次に、呼び出しが行われるたびに起動する追加の動作をすばやく定義する必要もあります。この場合、要素に最も近い親divを見つけて、次のようにクラスを更新しましょう。

function highlightDecorator(element, errorClass, validClass) {
    $(element).closest("div").addClass(errorClass).removeClass(validClass);
}

すべてをまとめる （私がそこで何をしたかを見てください）

$(function () {
  var valSettings = $("form").data("validator").settings
  valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}

したがって、上記のすべての関数を組み合わせると、次のようになります。

スタックスニペットと jsFiddle での作業デモ

$(function () {
  var valSettings = $("form").data("validator").settings
        valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}
input.input-validation-error  {
  border: solid 1px red;
}
.input-validation-error label {
  color: red;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
    
<form action="/Person" method="post">
  
  <div class="required">
    <label for="Name">Name <em>*</em></label>           
    <input id="Name" name="Name" type="text" value="" 
           data-val="true" data-val-required="The Name field is required."/>
    <span class="field-validation-valid" 
          data-valmsg-for="Name" data-valmsg-replace="true"></span>
  </div>
  
  <input type="submit" value="Save" />
  
</form>
6
KyleMit