jQuery Validation plugin errorPlacement for checkbox

jquery-validate

Question

Uso el complemento jQuery Validation para validar mi formulario. Mi problema es el lugar del mensaje de error para la casilla de verificación. por favor mira esta imagen:

Esta es la parte html relacionada con las casillas de verificación + Validación jQuery:

<fieldset id = "q8"> <legend class="Q8"></legend>
<label> What are your favourite genres of movies?<span>*</span></label>
<div class="fieldset content">
<style type="text/css">
.checkbox-grid li {
display: block;
float: left;
width: 25%;
}
</style>
<ul class="checkbox-grid">
<li><input type="checkbox" name="q8[]" value="Action"><label for="checkgenre[]">Action</label></li>
<li><input type="checkbox" name="q8[]" value="Adventure"><label for="checkgenre[]">Adventure</label></li>
<li><input type="checkbox" name="q8[]" value="Comedy"><label for="checkgenre[]">Comedy</label></li>
<li><input type="checkbox" name="q8[]" value="Animation"><label for="checkgenre[]">Animation</label></li>
<li><input type="checkbox" name="q8[]" value="Drama"><label for="checkgenre[]">Drama</label></li>
<li><input type="checkbox" name="q8[]" value="Romance"><label for="checkgenre[]">Romance</label></li>
//Continued the same for OTHER CHECKBOXES
</div>
</fieldset>
//html for other questions...
<input class="mainForm" type="submit" name="continue" value="Save and Continue" />
</form>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$(''#form2'').validate({ // initialize the plugin
errorLabelContainer: "#messageBox",
wrapper: "li",
rules: {
"q8[]": {
required: true,
},
"q9[]": {
required: true,
},
q10: {
required: true,
},
q11: {
required: true,
},
q12: {
required: true,
}
},
errorPlacement: function(error, element) {
if (element.attr("type") == "radio") {
error.insertBefore(element);
} else {
error.insertBefore(element);
}
}
});
});
</script>

¿Podría alguien amablemente ayudarme si es posible solucionar este problema o mostrar el mensaje de error (para todos los tipos de entrada) justo al lado de la pregunta? (Quiero decir exactamente la misma línea que la pregunta, después de *) ??

Gracias

Answer 1

Agregué una class a la label para su pregunta con el fin de encontrar eso más fácil ...

<label class="question">What are your favourite genres of movies?<span>*</span></label>

Entonces simplemente necesitas practicar tus técnicas de "DOM crossing". Estudie los métodos aquí .

• $(element).parents(''div'') encuentra el contenedor div de tu element .

• Entonces .prev($(''.question'')) te lleva a la .question que es el primer hermano anterior de este div .

Ponlo todo junto e inserta el mensaje de error justo después de la pregunta.

error.insertAfter($(element).parents(''div'').prev($(''.question'')))

Dentro de errorPlacement :

errorPlacement: function (error, element) {
if (element.attr("type") == "checkbox") {
error.insertAfter($(element).parents(''div'').prev($(''.question'')));
} else {
// something else if it''s not a checkbox
}
}

DEMO: http://jsfiddle.net/sgsvtd6y/

Tal vez no necesites el condicional, ya que esa técnica debería funcionar en todos tus tipos de input .

errorPlacement: function (error, element) {
error.insertAfter($(element).parents(''div'').prev($(''.question'')));
}

De lo contrario, si su HTML es diferente, puede usar el condicional con un cruce de DOM ligeramente modificado.