Подтвердить что ты не робот

Как сделать 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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Я подробно рассказал об этом в сообщении в блоге: 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);
        }
    }

Просмотрите DEMO здесь.

Ответ 3

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

$('#_form_id').validate({

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

Ответ 6

Найден ответ на форумах @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

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

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

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

Ответ 8

   <script>
     $('select').select2();
     $('select').css({"display": "block", 'position': 'absolute', 'top':'47px', 'z-index': '-1'});
   </script>

        <select required>
          <option value="">Select a category</option>
          <option>1</option>
        </select>

поскольку исходный скрытый выбор не отображается, сообщение об ошибке, которое вы должны отрегулировать, находится на выбранном

Ответ 9

В дополнение к ответу 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>

Ответ 10

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

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

Ответ 11

$("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()
        });
    }
});

работайте для меня.

Ответ 12

Вы можете проверить эту ссылку: https://github.com/rkeshmir/select2-validation Здесь вы можете найти самый простой способ проверки компонентов select2. Идентификатор идеи запускает проверку для всех <select> элементов в DOM в их событии изменения. Также я добавил необходимые правила CSS, чтобы выделить ошибки и состояния успеха ввода.

Ответ 13

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

Ответ 14

Чтобы проверить входные данные 'select2', вы должны сначала сказать jquery validate, чтобы рассмотреть скрытые элементы:

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

Это пользовательский ярлык /unhighlight, который я использую для указания select2 и тегов с подтверждением jquery:

$("#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;
}