ejemplos - jQuery anula la visualización de mensajes de error de validación por defecto(Css) Popup/Tooltip like
tooltip.js example (7)
Estoy tratando de sobrepasar la etiqueta del mensaje de error predeterminado con un div en lugar de una etiqueta. También he consultado esta publicación y cómo hacerlo, pero mis limitaciones con CSS me inquietan. ¿Cómo puedo mostrar esto como algunos de estos ejemplos?
Ejemplo n. ° 1 (Dojo) : debe escribir una entrada no válida para ver el error
Ejemplo n. ° 2
Aquí hay un código de ejemplo que anula la etiqueta de error a un elemento div
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div"
});
});
Ahora estoy perdido en la parte css, pero aquí está:
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;
}
ACTUALIZAR:
Bien, estoy usando este código ahora, pero la imagen y la ubicación en la ventana emergente son más grandes que el borde, ¿se puede ajustar para que sea dinámico? ¿Es alto?
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));
}
el css es el mismo de abajo (tu código 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>
Agregue el siguiente CSS a su método .validate para cambiar el css o la funcionalidad
errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css(''color'',''red''); }
Desafortunadamente no puedo comentar con mi reputación de novato, pero tengo una solución para el problema de la pantalla en blanco, o al menos esto es lo que funcionó para mí. En lugar de establecer la clase contenedora dentro de la función errorPlacement, configúrela inmediatamente cuando configure el tipo de envoltura.
$(''#myForm'').validate({
errorElement: "div",
wrapper: "div class=/"message/"",
errorPlacement: function(error, element) {
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() + 5);
error.css(''top'', offset.top - 3);
}
});
Asumo que hacerlo de esta manera permite al validador saber qué elementos de div eliminar, en lugar de todos. Funcionó para mí, pero no estoy del todo seguro de por qué, así que si alguien pudiera dar más detalles, eso podría ayudar a otros de una tonelada.
Esa respuesta realmente me ayudó, en mi caso tuve que filtrar algunos elementos y tener una alineación especial en su error div,
errorPlacement:function(error,element) {
if (element.attr("id") == "special_element") {
// special align
} else { // default error scheme
error.insertAfter(element);
}
}
Puede usar la opción errorPlacement para anular la visualización del mensaje de error con poco css. Porque el CSS por sí solo no será suficiente para producir el efecto que necesita.
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div",
wrapper: "div", // a wrapper around the error message
errorPlacement: function(error, element) {
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);
}
});
});
Puede jugar con los atributos css izquierdo y superior para mostrar el mensaje de error en la parte superior, izquierda, derecha o en la parte inferior del elemento. Por ejemplo, para mostrar el error en la parte superior:
errorPlacement: function(error, element) {
element.before(error);
offset = element.offset();
error.css(''left'', offset.left);
error.css(''top'', offset.top - element.outerHeight());
}
Y así. Puede consultar la documentación de jQuery sobre css para obtener más opciones.
Aquí está el css que usé. El resultado se ve exactamente como el que desea. Con el mínimo de CSS posible:
div.message{
background: transparent url(msg_arrow.gif) no-repeat scroll left center;
padding-left: 7px;
}
div.error{
background-color:#F3E6E6;
border-color: #924949;
border-style: solid solid solid none;
border-width: 2px;
padding: 5px;
}
Y aquí está la imagen de fondo que necesitas:
texto alternativo http://sandbox.scriptiny.com/messages/images/msg_arrow.gif
Si desea que se muestre el mensaje de error después de un grupo de opciones o campos. Luego, agrupe todos los elementos dentro de un contenedor a ''div'' o ''fieldset''. Agregue una clase especial a todos ellos ''grupo'', por ejemplo. Y agregue lo siguiente al comienzo de la función errorPlacement:
errorPlacement: function(error, element) {
if (element.hasClass(''group'')){
element = element.parent();
}
...// continue as previously explained
Si solo desea manejar casos específicos, puede usar attr en su lugar:
if (element.attr(''type'') == ''radio''){
element = element.parent();
}
Eso debería ser suficiente para que el mensaje de error se muestre al lado del elemento principal.
Es posible que necesite cambiar el ancho del elemento principal para que sea inferior al 100%.
He intentado tu código y está funcionando perfectamente bien para mí. Aquí hay una vista previa:
Acabo de hacer un pequeño ajuste en el relleno del mensaje para que encaje en la línea:
div.error {
padding: 2px 5px;
}
Puede cambiar esos números para aumentar / disminuir el relleno en la parte superior / inferior o izquierda / derecha. También puede agregar un alto y un ancho al mensaje de error. Si todavía tiene problemas, intente reemplazar el lapso con un div
<div class="group">
<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>
</div>
Y luego dale al contenedor un ancho (esto es muy importante)
div.group {
width: 50px; /* or any other value */
}
Acerca de la página en blanco. Como dije, probé tu código y está funcionando para mí. Puede ser que haya algo más en tu código que esté causando el problema.
Si pudieras dar alguna razón de por qué necesitas reemplazar la etiqueta con un div, eso ciertamente ayudaría ...
Además, podría pegar una muestra que sería útil ( http://dpaste.com/ o http://pastebin.com/ )
Unas pocas cosas:
En primer lugar, no creo que realmente necesite un error de validación para un fieldset de radio porque podría simplemente tener uno de los campos marcados por defecto. La mayoría de las personas prefiere corregir algo y luego proporcionar algo. Por ejemplo:
Age: (*) 12 - 18 | () 19 - 30 | 31 - 50
es más probable que se cambie a la respuesta correcta ya que la persona NO QUIERE que pase a la configuración predeterminada. Si lo ven en blanco, es más probable que piensen que "no es de su incumbencia" y omítanlo.
En segundo lugar, pude obtener el efecto que creo que usted desea sin ninguna propiedad de posicionamiento. Simplemente agregue relleno: derecho al formulario (o el div del formulario, lo que sea) para proporcionar suficiente espacio para su error y asegúrese de que su error encaje en esa área. Luego, tiene una clase css preconfigurada llamada "error" y la establece como si tuviera un margen negativo más arriba aproximadamente la altura de su campo de entrada y un margen izquierdo alrededor de la distancia desde la izquierda hasta donde está su margen derecho debería empezar. Probé esto, no es genial, pero funciona con tres propiedades y no requiere flotantes o absolutos:
<style type="text/css">
.error {
width: 13em; /* Ensures that the div won''t exceed right padding of form */
margin-top: -1.5em; /*Moves the div up to the same level as input */
margin-left: 11em; /*Moves div to the right */
font-size: .9em; /*Makes sure that the error div is smaller than input */
}
<form>
<label for="name">Name:</label><input id="name" type="textbox" />
<div class="error"><<< This field is required!</div>
<label for="numb">Phone:</label><input id="numb" type="textbox" />
<div class="error"><<< This field is required!</div>
</form>
Yo uso jQuery BeautyTips para lograr el pequeño efecto de burbuja del que estás hablando. No uso el complemento de Validación, así que no puedo ayudar mucho allí, pero es muy fácil de diseñar y mostrar los Consejos de Belleza. Deberías mirarlo. No es tan simple como las reglas de CSS, me temo, ya que necesita usar el elemento canvas e incluir un archivo javascript adicional para que IE juegue bien con él.