it-roy-ru.com

Как заставить select2 работать с плагином jquery.validation?

Я пытаюсь проверить поле select2 с помощью плагина jquey.validation, но ничего не происходит.

Я хочу сделать выбор нужного поля.

Я использую эту пользовательскую функцию проверки:

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

и это правило:

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

Какое поле select2 я должен использовать для соответствия правила?

Я ценю любую идею, как заставить select2 работать вместе с jquery.validation

10x

27
user2323711

Просто добавьте ignore: [], в вашу функцию проверки формы. Это позволит скрытое поле проверки. Так вы получите подтверждение для выбора 2

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

Я подробно рассказал об этом в своем блоге: http://chadkuehn.com/jquery-validate-select2/

Когда вы помещаете Select2 в тег SELECT, он скрывает оригинальный элемент. Таким образом, в плагине проверки вы должны настроить правильную разметку переноса при выделении и выделении.

    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);
        }
    }

Посмотреть ДЕМО здесь.

15
Chad Kuehn

В качестве подсказки, пожалуйста, учтите, что validate js привязывается к изменениям select not select 2. Это вызывает проблему в следующем случае:

  1. Существует обязательный параметр select box, который преобразуется в select2
  2. Вы нажимаете кнопку «Отправить», и ошибка показывает, что поле выбора является обязательным.
  3. Вы выбираете какой-то вариант из выбора 2.
  4. Ошибка проверки не скрывается автоматически

Вы можете исправить это с помощью:

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

В дополнение к ответу ABIRAMAN здесь есть код, который 

  • Делает поле 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>
8
Adam

Я обнаружил, что получение Select2 для работы с jQuery Validate очень сильно зависит от разметки, используемой при создании элемента управления Select2. 

Для наиболее практичного использования плагина вы, вероятно, будете использовать динамически загружаемые данные (данные, полученные с помощью веб-службы, вместо статических элементов <option/> на странице). И в соответствии с их спецификацией , способ сделать это - подключить Select2 к элементу <input type="hidden"/>. Однако элементы type = "hidden" не проверяются jQuery Validate по умолчанию.

Чтобы проверить скрытые элементы с помощью jQuery Validate, нужно повозиться со свойством ignore в объекте конфигурации jQuery Validate. Смотрите параметр ignore в их spec . Попробуйте инициализировать значение ignore как null, чтобы активировать проверку.

5
Ken

Нашел ответ на форумах @ 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'
      });
4
Himanshu Patel

просто добавьте строку в вашу функцию проверки.

$('#_form_id').validate({

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

Это не работает в Bootstrap Validator (), потому что валидатор включает все входные данные в форме . Это означает, что он будет проверять поле поиска ввода плагина select2 ., Что будет мешать проверке множественного выбора

Чтобы это исправить, просто перейдите в validator.js Добавьте класс поиска ввода input2 .select2-search__field В список игнорирования: 

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

Когда вы создаете пользовательское правило, вы также должны правильно его объявить. Так как ваше пользовательское правило зависит от аргумента, вы должны передать аргумент при объявлении правила

rules: {
   country: {
       required: true,
       requiredcountry: "your argument here"  // <- declare the custom rule
   }
}
0
Sparky

проверь мой код Я решаю свою проблему, используя эти коды ... только несколько (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>

0
Robinson Legaspi
$("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: [],
});

Это пользовательское выделение/снятие подсветки, которое я использую для указания ошибок select2 и tagit с помощью jquery validate:

$("#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. Идентификатор идентификатора идеи запускает проверку для всех элементов <select> в DOM при их событии изменения. Также я добавил обязательные правила 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