validar - ¿Cómo hacer que select2 funcione con jquery.validation plugin?

validar select jquery validate

Question

Estoy intentando validar el campo select2 usando el complemento jquey.validation pero no pasa nada.

Quiero hacer seleccionar el campo requerido.

Estoy usando esta función de validación personalizada:

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

y esta es la regla:

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

¿Qué campo select2 debo usar para que coincida la regla?

Aprecio cualquier idea de cómo hacer que select2 funcione junto con jquery.validation

10x

Answer 1

Además de la respuesta de ABIRAMAN, aquí hay un código que

• Hace que el cuadro select2 sea rojo cuando aparecen errores.
• Listar el error debajo del cuadro 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>

Answer 2

Como sugerencia, tenga en cuenta que la validación js se vincula a los cambios de select no select 2. Esto causa un problema en el siguiente caso:

1. Hay un select box obligatorio que se convierte en select2
2. Hace clic en el envío y el error muestra que el cuadro de selección es obligatorio.
3. Selecciona alguna opción de seleccionar 2.
4. El error de validación no se oculta automáticamente.

Puedes arreglarlo con:

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

Answer 3

Cuando creas una regla personalizada, también debes declararla correctamente. Ya que su regla personalizada depende de un argumento, entonces debe pasar el argumento al declarar la regla

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

Answer 4

Descubrí que conseguir que Select2 funcione con jQuery Validate depende en gran medida del marcado utilizado para crear el control Select2.

Para el uso más práctico del complemento, es probable que esté utilizando datos cargados dinámicamente (datos obtenidos a través del servicio web frente a elementos <option/> estáticos en la página). Y según su especificación , la forma de lograr esto es adjuntando Select2 a un elemento <input type="hidden"/> . Sin embargo, los elementos de tipo = "ocultos" no son validados por jQuery Validar de forma predeterminada.

Para validar los elementos ocultos usando jQuery Validate, uno debe jugar con la propiedad ignore en el objeto de configuración de jQuery Validate. Ver la opción ignore en su spec . Intente inicializar el valor de ignore como null para que la validación se active.

Answer 5

Encontré una respuesta en los foros @ https://github.com/select2/select2/issues/215 publicado por corinnaerin . Funcionó perfectamente para mí. Código de ejemplo en 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''
      });

Answer 6

Esto no funciona en Bootstrap Validator () porque el validador incluye todas las entradas en el formulario. Esto significa que validará el campo de búsqueda de entrada del complemento select2. Lo que interferirá con la validación multiselect.

Para solucionar este problema, simplemente vaya al validator.js Agregue la clase de búsqueda de entrada select2 .select2-search__field a la lista de ignorados:

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

Answer 7

He detallado esto en una entrada de blog: http://chadkuehn.com/jquery-validate-select2/

Cuando coloca un Select2 en una etiqueta SELECT, oculta el elemento original. Por lo tanto, en el complemento de validación, debe ajustar el marcado de ajuste adecuado al resaltar y no resaltar.

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

Ver una DEMO aquí.

Answer 8

Para validar las entradas ''select2'', primero debe decirle a jquery validate que considere los elementos ocultos:

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

Este es un resaltado / resaltado personalizado que utilizo para señalar select2 y los errores de tagit con 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 );
        }
     });

Y algunos 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;
}

Answer 9

Puede consultar este enlace: https://github.com/rkeshmir/select2-validation Aquí puede encontrar la forma más sencilla de validar los componentes select2. La idea id activó la validación para todos los elementos <select> en DOM en su evento de cambio. También he agregado las reglas CSS necesarias para resaltar los estados de entrada de error y éxito.

Answer 10

Resolví el problema, la solución es modificar los métodos de resaltar, no resaltar y, sobre todo, errorPlacement para cada instancia de validación. Sin embargo, para no modificar cada archivo, coloco las modificaciones en el archivo 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);
            }
        }
    }

Answer 11

Simplemente agregue ignore: [], en la función de validación de su formulario. Habilitará la validación de campos ocultos. Así obtendrá la validación para Select 2

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

Answer 12

mira mi código Resuelvo mi problema usando esos códigos ... solo algunos códigos (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>

Answer 13

simplemente añada una línea en su función de validación.

$(''#_form_id'').validate({

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

Answer 14

   <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>

debido a que la selección oculta original no se muestra, el mensaje de error que debe ajustar se encuentra en la selección

Answer 15

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

trabaja para mi.