jquery - chosen plugin validation
¿Cómo puedo usar la validación de jQuery con el complemento "elegido"? (14)
Tengo algunas entradas <select> usando el complemento elegido que quiero validar como "obligatorio" en el lado del cliente. Como "elegido" oculta el elemento de selección real y crea un widget con divs y tramos, la validación HTML5 nativa no parece funcionar correctamente. El formulario no se enviará (lo cual es bueno), pero el mensaje de error no se muestra, por lo que el usuario no tiene idea de qué es lo que está mal (lo cual no es bueno).
He recurrido al complemento de validación de jQuery (que planeé usar eventualmente) pero no he tenido suerte hasta el momento. Aquí está mi caso de prueba :
<form>
<label>Name: <input name="test1" required></label>
<label>Favorite Color:
<select name="test2" required>
<option value=""></option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</label>
<input type="submit">
</form>
$(document).ready(function(){
$(''select'').chosen();
$(''form'').validate();
});
Esto permite que la select pase por un valor vacío, sin validar ni mostrar el mensaje de error. Cuando comento la línea chosen() , funciona bien.
¿Cómo puedo validar las entradas chosen() con el complemento de validación jQuery y mostrar el mensaje de error para las inválidas?
¡Pasé casi un día trabajando en esto y no tuve suerte! ¡Luego miré el código fuente que Vtiger estaba usando y encontré oro! ¡Aunque usaban versiones anteriores, tenían la llave! tienes que usar
data-validation-engine="validate[required]"
Si no lo haces y lo tienes donde se pasan las clases a través de la clase, la selección se aplica al elegido y cree que tu elección nunca se actualiza. Si no pasas la clase al elegido, esto debería ser un problema, PERO si lo haces es la única forma en que funcionará.
Esto es con 1.4.2 validationEngine 2.6.2 y jquery 2.1.4 elegidos
// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
prettySelect : true,
useSuffix: "_chosen"
//promptPosition : "bottomLeft"
});
// Puedes arreglar esto usando otra forma de ocultar el elemento elegido. p.ej....
$(document).ready(function() {
$.validator.addMethod( //adding a method to validate select box//
"chosen",
function(value, element) {
return (value == null ? false : (value.length == 0 ? false : true))
},
"please select an option"//custom message
);
$("form").validate({
rules: {
test2: {
chosen: true
}
}
});
$("[name=''test2'']").css("position", "absolute").css("z-index", "-9999").chosen().show();
//validation.....
$("form").submit(function()
{
if ($(this).valid())
{alert("valid");
//some code here
}
return false;
});
});
@Anupal me puso en el camino correcto, pero de alguna manera necesitaba una solución compleja
Habilite .chosen para ser considerado
javascript
$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })
O cualquier otro nombre que le des a tus elegidos. Esta es una configuración global. Considere establecer en el nivel superior
Crear una regla personalizada para el elegido
Gracias a BenG
html
<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
<option value="">Please select…</option>
</select>
javascript
Nuevamente, configuración global para el objeto $.validator . Se puede poner al lado del comando anterior
$.validator.addMethod(''chosen-required'', function (value, element, requiredValue) {
return requiredValue == false || element.value != '''';
}, $.validator.messages.required);
Creo que esta es la mejor solución.
//trigger validation onchange
$(''select'').on(''change'', function() {
$(this).valid();
});
$(''form'').validate({
ignore: '':hidden'', //still ignore Chosen selects
submitHandler: function(form) { //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here
var $selects = $(form).find(''select''),
valid = true;
if ($selects.length) {
//validate selects
$selects.each(function() {
if (!$(this).valid()) {
valid = false;
}
});
}
//only submit the form if all fields have passed validation
if (valid) {
form.submit();
}
},
invalidHandler: function(event, validator) { //one or more fields have failed validation, but the Chosen selects have not been validated yet
var $selects = $(this).find(''select'');
if ($selects.length) {
validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason
//validate selects
$selects.each(function(index){
validator.element(this);
})
}
},
//other options...
});
Nota: También necesitará cambiar la devolución de llamada de errorPlacement para manejar la visualización del error. Si su mensaje de error está al lado del campo, necesitará usar .siblings(''.errorMessageClassHere'') (u otras formas según el DOM) en lugar de .next(''.errorMessageClassHere'') .
La validación de jQuery no recogerá los elementos que están ocultos, pero puede obligarlo a validar elementos individuales. Poco de un truco, pero el siguiente funcionará:
$(''form'').on(''submit'', function(e) {
if(!$(''[name="test2"]'').valid()) {
e.preventDefault();
}
});
Para seleccionar solo elementos "elegidos" puede usar $(''.chzn-done'')
Mi formulario incluye campos condicionalmente ocultos, para evitar que los campos seleccionados ocultos fallen en la validación. He extendido el incumplimiento predeterminado: oculto un poco más:
$.validator.setDefaults({
ignore: ":hidden:not(.chosen-select + .chosen-container:visible)" //for all select having class .chosen-select
})
También podría tener problemas para mostrar el mensaje de error antes de la lista desplegable elegida. Descubrí la solución para resolver este problema y pegué mi código aquí para compartirlo contigo
HTML:
<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>
Javascript:
if (!$(''#ddlSponsorLevel'').valid()) {
$(''#ddlSponsorLevel-error'').text("You must choose a sponsor level");
return false;
}
Jquery Validation en realidad agregó un elemento html de etiqueta oculta. Podemos redefinir este elemento con la misma ID en un lugar diferente para sobrescribir el lugar original.
También puedes probar esto:
$(''form'').on(''submit'', function(event) {
event.preventDefault();
if($(''form'').valid() == true && $(''.select-chosen'').valid() == true){
console.log("Valid form");
} else {
console.log("Invalid form");
}
});
Recuerde agregar la clase .select-chosen en cada select s.
$(''.select-chosen'').valid() fuerza la validación para los select ocultos s
Tuve que colocar $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
fuera $(document).ready(function() para trabajar con elegido.js.
https://.com/a/10063394/4063622
en el mío.
mi formulario tiene la clase ''validate'' y cada elemento de entrada tiene el código html ''required'' de la clase:
<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
<div class="control-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input id="sku" class="required span6" type="text" name="sku">
</div>
</div>
<div class="control-group">
<label for="supplier" class="control-label">Supplier</label>
<div class="controls">
<select name="supplier" id="supplier" class=''cho span6 {required:true} ''>
<option value=''''>-- PILIH --</option>
<?php
foreach ($result as $res)
{
echo ''<option value="''.$res[''tbl_suppliers''][''kode_supplier''].''">''.$res[''tbl_suppliers''][''nama_supplier''].''</option>'';
}
?>
</select>
</div>
</div>
</form>
y código de JavaScript para elegido con validación jquery
$(document).ready(function() {
// - validation
if($(''.validate'').length > 0){
$(''.validate'').validate({
errorPlacement:function(error, element){
element.parents(''.controls'').append(error);
},
highlight: function(label) {
$(label).closest(''.control-group'').removeClass(''error success'').addClass(''error'');
},
success: function(label) {
label.addClass(''valid'').closest(''.control-group'').removeClass(''error success'').addClass(''success'');
},
//validate choosen select (select with search)
ignore: ":hidden:not(select)"
});
}
// - chosen, add the text if no result matched
if($(''.cho'').length > 0){
$(".cho").chosen({no_results_text: "No results matched"});
}
});
Nota: si el valor de entrada es nulo, el error de clase se agregará al padre ''div''
esta regla simple de CSS funciona en la implementación de joomla 3 de
Elegido agrega la clase no válida a la entrada de selección oculta, así que úsela para seleccionar el cuadro de selección elegido
.invalid, .invalid + div.chzn-container a {
border-color: red !important;
}
jQuery validate ignora el elemento oculto, y como el complemento elegido agrega visibility:hidden atributo visibility:hidden a la selección, intente:
$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select
O
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select
Agregue esta línea justo antes de la función validate() . Funciona bien para mí.
jQuery("#formID").validationEngine({
prettySelect : true,
useSuffix: "_chzn"
});