Los mensajes de validación de Ajax de conflicto de JQuery devuelven la ubicación
Tengo un problema con mi formulario jquery. si miras esto violín donde estoy creando mi formulario, notará que después de crear un campo de entrada y luego eliminarlo, los mensajes de alerta comienzan a aparecer en el siguiente elemento (debajo de donde se colocaron inicialmente).
Para aclarar: si el usuario aún no ha ingresado ninguna información, las alertas aparecen en la posición correcta (flotantes en el lado derecho del campo de entrada en texto rojo). Sin embargo, si el usuario ha ingresado información y luego la elimina, la alerta ajax ("este campo es obligatorio") aparece en el lugar incorrecto en el campo debajo de donde se supone que debe hacerlo. Para ver el problema, escriba todos los campos correctamente y luego elimine su nombre. Aparece el mensaje "este campo es obligatorio" en el campo de correo electrónico, pero pertenece al campo de nombre.
El js que controla la validación es:
$(document).ready(function() {
$('#commentForm').validate({
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'process.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#commentForm').append(returnedData);
}
});
return false;
},
errorPlacement: function(error, element) {
error.insertAfter( element).position({
my:'right top',
at:'right top',
of:element
});
}
});
});
EDIT 1: Usar el modo Jquery NoConflict no ha resuelto este problema. Como parece ser un problema con la forma en que los dos complementos funcionan juntos.
EDIT 2: En realidad, hay dos soluciones a este problema. Una es incluir la secuencia de comandos jquery UI en el encabezado, lo que permite que su utilidad de "posición" alinee los mensajes de error en la "parte superior derecha".
La otra solución, como señalaron algunos otros colaboradores, es modificar el css para establecer
form p {
position: relative; /* This ensures error label is positioned within the p tag */
}
label.error {
top: 0; /* This ensures that it lines up with the top of the input */
right:90px;
color: red;
position:absolute;
}
Gracias por todos los aportes.
preguntado el 09 de marzo de 12 a las 17:03
Nick B
5 Respuestas
Me parece un problema de estilo (pero, de nuevo, todo lo hace :) con una posición utilizada incorrectamente: absoluta, que, por cierto, cancela float: left - http://jsfiddle.net/kmJ87/17/
Si realmente está apegado a position:absolute (más estilo en el css completo, ¿tal vez como un buen mensaje de cuadro?) Podría solucionarlo agregando position:relative al elemento principal (párrafo en este caso) - http://jsfiddle.net/kmJ87/18/
respondido 15 mar '12, 01:03
El problema radica parcialmente en las declaraciones CSS:
/* Begin first declaration for <label class="error" /> */
label.error {
color: red;
position:absolute;
}
/* Begin second declaration for <label class="error" />. Nothing inherently wrong with this, but a bit odd considering the simplified fiddle.*/
label.error {
float: left; /* Kinda replaces previously declared absolute position as "float" and "position" are kinda, but not really, mutually exclusive properties. */
right: 30px; /* Useless declaration (for now) as "right" is used wih "position" not "float". */
color: #ff714d;
position: absolute; /* Replaces previously declared float and makes the previously assigned "right" property useful again. */
font-family: 'subhead', helvetica, verdana;
letter-spacing: 1px;
text-transform: lowercase;
}
Como position: absolute; es la última declaración (en la posición frente a las declaraciones flotantes), el elemento se posiciona de forma absoluta.
La primera parte del problema es que, dado que la top la propiedad no fue declarada y el display de la etiqueta es block, el navegador coloca la parte superior en la siguiente línea hacia abajo (que es donde estaría la parte superior en un flujo estático).
La segunda parte del problema es que dado que un float fue declarado, el navegador aún intenta float el elemento también (que nuevamente termina con el navegador posicionando la parte superior en la siguiente línea hacia abajo).
La solución (hasta ahora) es eliminar el float declaración y declarar un top of 0 en el capítulo respecto a la label.error estilismos.
label.error {
color: red;
position:absolute;
}
label.error {
top: 0; /* Replaces "float: left;" and fixes the display. */
right:30px;
color: #ff714d;
position: absolute;
font-family: 'subhead', helvetica, verdana;
letter-spacing: 1px;
text-transform: lowercase;
}
o en una sola declaración:
label.error {
color: red;
position: absolute;
right: 30px;
top: 0;
color: #ff714d;
position: absolute;
font-family: 'subhead', helvetica, verdana;
letter-spacing: 1px;
text-transform: lowercase;
}
Actualizar el código a esto presenta el problema final, que es que todos los mensajes de error ahora aparecen en la parte superior del documento.
Esto es causado por el position: absolute; declaración como elementos que están absolutamente posicionados se eliminan del flujo de documentos normal y se colocan (absolutamente) en el elemento antepasado no posicionado estáticamente más cercano.
En este caso, no hay ninguno por lo que el <label class="error" /> los elementos están absolutamente posicionados a la <body />. La parte final de la solución, por lo tanto, es hacer que el p elementos posicionados no estáticamente (ya que es donde los errores deberían estar absolutamente posicionados).
CSS final:
p {
position: relative;
}
label.error {
color: red;
position: absolute;
right: 30px;
top: 0;
color: #ff714d;
position: absolute;
font-family: 'subhead', helvetica, verdana;
letter-spacing: 1px;
text-transform: lowercase;
}
respondido 17 mar '12, 00:03
Si, gracias. CSS es una solución a este problema. El problema se solucionó agregando form p {posición: relativa;} y label.error {top: 0;} - Nick B.
Te dio la recompensa, pero el otro tipo respondió porque fue el primero en señalar que era un problema de css. De hecho, lo descubrí yo mismo, pero agradezco los detalles que ha proporcionado. Gracias - Nick B.
El jcps javascript no debería tener ninguna influencia en la página, ya que solo define un objeto y en realidad no se usa en ninguna parte (todavía). Cuando estaba jugueteando con el código, también me encontré con problemas incluso si el jcps javascript estaba comentado.
Parecía que el navegador tenía problemas con el diseño de la etiqueta dentro de un párrafo, al cambiar los párrafos a divs con posición relativa y agregar top 0px al estilo de error, las cosas se volvieron más estables. Sin embargo, noté que el validador todavía tiene algunos problemas intermitentes, quizás causados por algunos errores menores.
Esta es la versión con la que terminé por ahora: http://jsfiddle.net/kmJ87/20/
respondido 16 mar '12, 23:03
Podemos declarar documento.listo método de dos maneras
$(documento).listo(función() {
// nuestro código viene aquí
}); Aquí $ es un mundial variable y se refiere al objeto jQuery.
jQuery(documento).listo(función($) {
// Nuestro código viene aquí
}); // Aquí $ es local variable y se refiere jQuery objeto.
Revisa el punto 5 de este enlace: http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/
respondido 13 mar '12, 12:03
Gracias por tu contribución. ¿Puede mostrarme cómo editaría jsfiddle para solucionar este problema? Porque en realidad no uso $(document).ready(function(){ en esa versión. - Nick B.
@NickB: Esto no es un problema con jQuery. Este es un problema con CSS. tienes una etiqueta de clase css personalizada. error. Si comenta esta clase, puede encontrar que todo funciona bien (el color del texto del error puede estar en negro, pero el error se muestra en el lugar correcto). - mukul.das
Muchas bibliotecas de JavaScript usan $ como función o nombre de variable, tal como lo hace jQuery. En el caso de jQuery, $ es solo un alias para jQuery, por lo que toda la funcionalidad está disponible sin usar $. Si necesitamos usar otra biblioteca de JavaScript junto con jQuery, podemos devolver el control de $ a la otra biblioteca con una llamada a jQuery.noConflict();
ver ejemplo aquí:
jQuery.noConflict();
(function($)
{
// your code goes here
})
(jQuery);
prueba con eso
respondido 09 mar '12, 18:03
¿Podría editar jsfiddle para mostrar cómo usaría no conflicto en este caso? - Nick B.
noConflict no es una solución para este problema, ya que parece surgir de la interacción de dos complementos de jQuery. Asignar un valor diferente a $ no resuelve este problema. Gracias. Cualquier otra idea es muy bienvenida - Nick B.
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery css ajax forms errorplacement or haz tu propia pregunta.
Solo para aclarar que no hay conflicto entre los complementos. jsfiddle.net/AstDerek/kmJ87/19 - ast derek