web-dev-qa-db-ja.com

select2をjquery.validationプラグインで動作させる方法は？

Jquey.validationプラグインを使用してselect2フィールドを検証しようとしていますが、何も起こりません。

選択必須フィールドにしたい。

このカスタム検証関数を使用しています：

$.validator.addMethod("requiredcountry", function(value, element, arg){
              return arg != value;
         }, "Value must not equal arg.");

これがルールです：

rules:
{
 country:
 {
         required: true,
         requiredcountry: ""
 }
}

ルールを一致させるには、どのselect2フィールドを使用する必要がありますか？

Select2をjquery.validationと連携させる方法についてのアイデアに感謝します

10倍

jqueryjquery-validatejquery-select2
30
user2323711

フォーム検証関数にignore: [],を追加するだけです。非表示フィールドの検証が有効になります。したがって、Select 2の検証を取得できます。

$("#ContactForm").validate({
  ignore: [],       
  rules: {
    //Rules
  },
  messages: {
    //messages
  }
});
38
ABIRAMAN

これについてはブログ投稿で詳しく説明しています： http://chadkuehn.com/jquery-validate-select2/

SELECT2にSELECT2を配置すると、元の要素が非表示になります。そのため、検証プラグインでは、強調表示および強調表示解除時に適切なラッピングマークアップを調整する必要があります。

    highlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-offscreen")) {
            $("#s2id_" + elem.attr("id") + " ul").addClass(errorClass);
        } else {
            elem.addClass(errorClass);
        }
    },

    unhighlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-offscreen")) {
            $("#s2id_" + elem.attr("id") + " ul").removeClass(errorClass);
        } else {
            elem.removeClass(errorClass);
        }
    }

[〜＃〜] demo [〜＃〜] を表示します。

16
Chad Kuehn

ヒントとして、検証jsはselect 2ではなくselectの変更にバインドすることを考慮してください。これは以下の場合に問題を引き起こします。

  1. 必須select boxがあり、select2に変換されます
  2. 送信をクリックすると、選択ボックスが必要であることを示すエラーが表示されます。
  3. 選択2からいくつかのオプションを選択します。
  4. 検証エラーは自動的に非表示になりません

次の方法で修正できます。

     $("select").on("select2:close", function (e) {  
        $(this).valid(); 
    });
11
Alireza Fattahi

アビラマンの答えに加えて、ここにいくつかのコードがあります

  • エラーが表示されたときにselect2ボックスを赤にします
  • Select2ボックスの下にエラーをリストします
<style>
  span.error{
    outline: none;
    border: 1px solid #800000;
    box-shadow: 0 0 5px 1px #800000;
  }
</style>

<script>
 $("#form").validate({
     rules: {
       email: "required"
     },
     highlight: function (element, errorClass, validClass) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass); 
       } else {
           elem.addClass(errorClass);
       }
     },    
     unhighlight: function (element, errorClass, validClass) {
         var elem = $(element);
         if (elem.hasClass("select2-hidden-accessible")) {
              $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
         } else {
             elem.removeClass(errorClass);
         }
     },
     errorPlacement: function(error, element) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           element = $("#select2-" + elem.attr("id") + "-container").parent(); 
           error.insertAfter(element);
       } else {
           error.insertAfter(element);
       }
     }
   });

$('select').select2({}).on("change", function (e) {
  $(this).valid()
});
</script>
9
Adam

フォーラムで回答を見つけました@ https://github.com/select2/select2/issues/215 投稿者 corinnaerin 。私にとって完璧に働いた。 http://plnkr.co/edit/4QaSguIiYsJtLpuPF8Rc?p=preview のサンプルコード

      var $select = $('select').select2({
        placeholder: 'Choose',
        allowClear: true
      });

      /*
       * When you change the value the select via select2, it triggers
       * a 'change' event, but the jquery validation plugin
       * only re-validates on 'blur'
       */
      $select.on('change', function() {
        $(this).trigger('blur');
      });

      $('#myForm').validate({
        ignore: 'input[type=hidden], .select2-input, .select2-focusser'
      });
7
Himanshu Patel

Select2をjQuery Validateで動作させることは、Select2コントロールの作成に使用されるマークアップに大きく依存することがわかりました。

プラグインを最も実用的に使用するには、おそらく動的にロードされたデータ（Webサービス経由で取得したデータと静的<option/>ページ内の要素）。 仕様ごと 、これを実現する方法は、Select2を<input type="hidden"/>要素。ただし、type = "hidden"の要素は、デフォルトではjQuery Validateによって検証されません。

JQuery Validateを使用して非表示要素を検証するには、jQuery Validateの構成オブジェクトのignoreプロパティをいじる必要があります。 spec のignoreオプションを参照してください。トリガーする検証を取得するには、ignore値をnullとして初期化してください。

5
Ken

検証関数に行を追加するだけです。

$('#_form_id').validate({

       ignore: 'input[type=hidden]',
            rules: {
                //Rules
            },
            messages: {
               //messages
            },
}
3
Nirav Thakar

これはBootstrap Validator（）では機能しません。バリデーターにはフォームのすべての入力が含まれているためです。つまり、select2プラグインの入力検索フィールドを検証します。検証

これを修正するには、validator.jsに移動し、select2入力検索クラス。select2-search__fieldを無視リストに追加します。

Validator.INPUT_SELECTOR = ':input:not([type="submit"], button, .select2-search__field):enabled:visible'
2
Boris Grinshpun

私のコードをチェックしてください。これらのコードを使用して問題を解決します...いくつかの（css、jquery）コードのみ

$(document).ready(function() {

  //form validations---------------------------------------------------------
  $('#sample').validate({
    ignore: [],
    errorClass: "error",
    errorElement: "span"
  });

  $("#receiver_name").select2({
    placeholder: "Receiver Name"
  });

  $("#receiver_name").select2().change(function() {
    $(this).valid();
  });
});
.error .select2-choice.select2-default,
.error .select2-choices {
  color: #a94442;
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.error:focus,
.error .select2-choice.select2-defaultLfocus,
.error .select2-choicesLfocus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.select2-container .select2-choices .select2-search-field input,
.select2-container .select2-choice,
.select2-container .select2-choices,
.error {
  border-radius: 1px;
}
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet" />


</head>

<body>
  <form id='sample'>
    <select class="form-control" name="receiver_name[]" id="receiver_name" multiple required>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>


</body>

</html>
1
Robinson Legaspi

カスタムルールを作成するときは、適切に宣言する必要もあります。カスタムルールは引数に依存するため、ルールを宣言するときに引数を渡す必要があります

rules: {
   country: {
       required: true,
       requiredcountry: "your argument here"  // <- declare the custom rule
   }
}
0
Sparky
$("select.select2-me").each(function(index, el) {

    if ($(this).is("[data-rule-required]") && 
    $(this).attr("data-rule-required") == "true") {
        $(this).on('select2-close', function(e) {
            $(this).valid()
        });
    }
});

私のために働きます。

0
Patrik Guerra

「select2」入力を検証するには、まずjquery validateに非表示要素を考慮するように指示する必要があります。

$.validator.setDefaults({ 
ignore: [],
});

これは、jquery validateでselect2とtagitエラーを指すために使用するカスタムハイライト/ハイライト解除です：

$("#someform").validate({
        rules: {
            nazwa: {
                required: true
            },
            ilosc_w_opakowaniu: {
                required: "#czy_opakowanie_zbiorcze:checked"
            }
        },
        messages: {
            nazwa: "Musisz wypełnić pole [Nazwa]",
            ilosc_w_opakowaniu: "Musisz podać ilość produktu w opakowaniu zbiorczym",
        },

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

            // select2
            if( $(element).hasClass('select2-hidden-accessible') ){
                dzik = $(element).next('span.select2');
                if(dzik)
                    dzik.addClass( errorClass ).removeClass( validClass );
            }

            // tagit
            dzik2 = $(element).parent().find('ul.tagit') 
            if( dzik2.length == 1 )
                dzik2.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 );
            }

            // select2
            if( $(element).hasClass('select2-hidden-accessible') ){
                dzik = $(element).next('span.select2');
                if(dzik)
                    dzik.removeClass( errorClass ).addClass( validClass );
            }

            // tagit
            dzik2 = $(element).parent().find('ul.tagit') 
            if( dzik2.length == 1 )
                dzik2.removeClass( errorClass ).addClass( validClass );
        }
     });

そしていくつかのCSS：

/** select2 error hightight **/
.select2.error .select2-selection--single{
    border-color:red !important;
    color:red !important;
}

/** tagit error highlight **/
.tagit.error{
   border-color:red !important;
   color:red !important;
}
0
denesis

このリンクを確認できます： https://github.com/rkeshmir/select2-validation ここでは、select2コンポーネントを検証する最も簡単な方法を見つけることができます。アイデアIDは、変更イベントでDOMのすべての<select>アイテムの検証をトリガーします。また、入力のエラーおよび成功状態を強調するために必要なCSSルールを追加しました。

0
rezKesh

私は問題を解決しました。解決策は、検証の各インスタンスの強調表示、非強調表示、とりわけerrorPlacementメソッドを変更することです。ただし、各ファイルを変更しないように、jquery.validate.jsファイルに変更を加えます

highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
        } else {
            var elem = $(element);
            if (elem.attr('readonly') == 'readonly') {
                if (elem.hasClass("input-group-addon")) {
                   $("#" + elem.attr("id")).parent().addClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            } else {
                if (elem.hasClass("select2-hidden-accessible")) {
                   $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            }
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
        } else {
            var elem = $(element);
            if (elem.attr('readonly') == 'readonly') {
                if (elem.hasClass("input-group-addon")) {
                   $("#" + elem.attr("id")).parent().removeClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            } else {
                if (elem.hasClass("select2-hidden-accessible")) {
                    $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
                } else {
                    $( element ).removeClass( errorClass ).addClass( validClass );
                }
            }
        }
    },
    errorPlacement: function(error, element) {
        var elem = $(element);
        if (elem.attr('readonly') == 'readonly') {
            element = $("#" + elem.attr("id")).parent();
            error.insertAfter(element);
        } else {
            if (elem.hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + elem.attr("id") + "-container").parent().parent().parent();
                error.insertAfter(element);
            } else {
                error.insertAfter(element);
            }
        }
    }
0
Marcelo Quispe Ortega