J'essaie de remplacer l'étiquette du message d'erreur par défaut par un div au lieu d'une étiquette. J'ai regardé ce poste et je sais comment le faire, mais mes limites avec CSS me hantent. Comment puis-je l'afficher comme certains de ces exemples ?
Exemple #1 (Dojo) - Il faut taper une entrée invalide pour que l'erreur s'affiche
Exemple n° 2
Voici un exemple de code qui remplace l'étiquette d'erreur par un élément div.
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div"
});
});
Maintenant, je suis un peu perdu sur la partie css mais voilà :
div.error {
position:absolute;
margin-top:-21px;
margin-left:150px;
border:2px solid #C0C097;
background-color:#fff;
color:white;
padding:3px;
text-align:left;
z-index:1;
color:#333333;
font:100% arial,helvetica,clean,sans-serif;
font-size:15px;
font-weight:bold;
}
UPDATE :
Ok, j'utilise ce code maintenant mais l'image et le placement sur le popup est plus grand que la bordure, est-ce que cela peut être ajusté pour être dynamique en hauteur ?
if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
element = element.parent();
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
// Error placement for single elements
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
le css est le même que ci-dessous (votre code css)
Html
<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>