mostra errore di validazione jquery sotto l'elemento

Question

Ho due elementi (dropdown) che sono posizionati molto vicino. Questi elementi sono campi obbligatori.

Sto usando jquery valiate per convalidare i campi. Il messaggio di errore è visualizzato per entrambi gli elementi e lo spazio tra gli elementi aumenta quando viene visualizzato il messaggio di errore del primo controllo vicino all'elemento

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

Ho provato con pausa prima gli elementi come:

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

Quando ho fatto questo, il secondo elemento si sposta sulla riga successiva.

Come posso mostrare i messaggi di errore appena sotto gli elementi senza influire sull'allineamento/posizionamento degli elementi vicini.

Answer 1

Utilizzare l'opzione di errorPlacement(vedere la documentazione qui: 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")); 
     } 
    }); 

Naturalmente dovrete adattare il codice per la vostra situazione.

Answer 2

trovato una soluzione utilizzando il metodo InsertAfter() sul mio aspx modulo web:

jQuery (function() {

// Fare la convalida Specificare elemento avvolgente, un tocco di stile , la classe e il messaggio di errore di inserimento dopo elemento per 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]')); 
    } 
}); 

// regole applicabili

$ ('[id * = element_to_validate]'). Le regole ('add', {

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

});