muestra el error de validación de jquery debajo del elemento

Question

Tengo dos elementos (menús desplegables) que están muy cerca. Estos elementos son campos obligatorios.

Estoy usando jquery valiate para validar los campos. El mensaje de error están mostrando tanto para los elementos y el espacio entre los elementos aumenta a medida que el mensaje de error de primer control se muestra cerca del elemento

$('#RegisterForm').validate({ 
     rules: { 
      Country:{required: true}, 
      State:{required: true} 
     }, 
     messages: { 
      Country:{required: "Select Country"}, 
      State:{required: "Select State"} 
     } 
    }); 

He intentado usar descanso antes de los elementos como:

$('#RegisterForm').validate({ 
      rules: { 
       Country:{required: true}, 
       State:{required: true} 
      }, 
      messages: { 
       Country:{required: "<br/>Select Country"}, 
       State:{required: "<br/>Select State"} 
      } 
     }); 

Cuando lo hice, el segundo elemento se mueve a la siguiente línea.

¿Cómo puedo mostrar los mensajes de error justo debajo de los elementos sin afectar la alineación/ubicación de los elementos cercanos.

Answer 1

Use la opción errorPlacement(véase la documentación aquí: http://docs.jquery.com/Plugins/Validation/validate#toptions)

$('#RegisterForm').validate({ 
     rules: { 
      Country:{required: true}, 
      State:{required: true} 
     }, 
     messages: { 
      Country:{required: "Select Country"}, 
      State:{required: "Select State"} 
     }, 
     errorPlacement: function(error, element) { 
      error.appendTo(element.parent("td").next("td")); 
     } 
    }); 

Por supuesto que tendrá que adaptar el código a su situación.

Answer 2

encontrado una solución mediante el método InsertAfter() en mi aspx formulario web:

jQuery (function() {

// Hacer la Validación Especificar elemento de envoltura, añadir estilo , clase e insertar mensaje de error después del elemento por ID

$('#yourform').validate({ 
    wrapper: 'span', 
     errorPlacement: function (error, element) { 
     error.css({ 'color': '#FFA500', 'font-size': '0.750em' });  
     error.addClass("error") 
     error.insertAfter($('[id*=element_before_error_message]')); 
    } 
}); 

// normas aplicables

$ ('[id * = element_to_validate]'). Reglas ('añadir', {

required: true, 
    messages: { 
    required: '<br />* Some Validation Text' 
    } 
}); 

});