Jquery convalida plug-in di collocamento di errore personalizzato

Question

Utilizzando il jQuery convalida plug-in per il seguente modulo:

<form id="information" method="post" action="#"> 

      <fieldset> 
       <legend>Please enter your contact details</legend> 
       <span id="invalid-name"></span> 
       <div id="id"> 
        <label for="name">Name: (*)</label> 
        <input type="text" id="name" class="details" name="name" maxlength="50" /> 
       </div> 

       <span id="invalid-email"></span> 
       <div id="id"> 
        <label for="email">Email: (*)</label> 
        <input type="text" id="email" class="details" name="email" maxlength="50" /> 
       </div> 
      </fieldset> 
      <fieldset> 
       <legend>Write your question here (*)</legend> 
       <span id="invalid-text"></span> 
       <textarea id="text" name="text" rows="8" cols="8"></textarea> 


      <div id="submission"> 
       <input type="submit" id="submit" value="Send" name="send"/> 
      </div> 
      <p class="required">(*) Required</p> 
      </fieldset> 

      </form> 

Come faccio a posizionare gli errori all'interno dei tag span? (# nome non valido, # email non valida, # testo non valido)

Ho letto la documentazione relativa al posizionamento degli errori ma non ho ottenuto come funziona. È possibile gestire ogni singolo errore e posizionarlo nell'elemento specificato?

Grazie

Answer 1

Si tratta di una struttura di base, è possibile utilizzare qualsiasi selettore che si desidera nel metodo. Hai l'elemento error e l'elemento che non era valido.

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo(element.prev()); 
    } 
}); 

O di indirizzare l'ID, si potrebbe fare

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo('#invalid-' + element.attr('id')); 
    } 
}); 

non testato, ma dovrebbe funzionare.

Answer 2

ho trovato che l'uso di .insertAfter piuttosto che .appendTo funziona:

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.insertAfter('#invalid-' + element.attr('id')); 
    } 
}); 

Answer 3

È inoltre possibile aggiungere manualmente le etichette di errore in cui sono necessari. Nel mio caso particolare avevo una forma più complessa con elenchi di caselle di controllo ecc. Dove un inserto o un inserto dopo rompevano il layout. Invece di fare ciò, puoi sfruttare il fatto che lo script di validazione valuterà se esiste un tag etichetta esistente per il campo specificato e lo usa.

considerare:

<div id="id"> 
    <label for="name">Name: (*)</label> 
    <input type="text" id="name" class="details" name="name" maxlength="50" /> 
</div> 

Ora aggiungere la seguente riga:

<label for="name" class="error" generated="true"></label>

che è un'etichetta standard error:

<div id="id"> 
    <label for="name">Name: (*)</label> 
    <input type="text" id="name" class="details" name="name" maxlength="50" /> 
</div> 
<div id="id-error"> 
    <label for="name" class="error" generated="true"></label> 
<div> 

jQuery utilizzerà questa etichetta anziché generarne una nuova. Spiacente, non sono riuscito a trovare alcuna documentazione ufficiale, ma ho trovato altri post che si sono imbattuti in questo comportamento.

Answer 4

Sto utilizzando l'estensione dei metadati con il validatore .. (nota, sto impostando in modo da utilizzare l'attributo data-meta sul markup ...)

<input ... data=meta='{ 
    errorLabel: "#someotherid" 
    ,validate: { 
     name:true 
    } 
}' >

poi nel codice .. .

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo($(
      $(element).metadata().errorLabel 
     )); 
    } 
});

Sto usando i metadati per un sacco di funzionalità simile, che funziona piuttosto bene ... nota, ho usato le singole zecche (apostrofi) intorno ai meta dati, in questo modo è possibile utilizzare un Serializzatore JSON lato server da inserire in quella parte del tag (che dovrebbe usare virgolette attorno alle stringhe) ... un lit eral apos può essere un problema però, (sostituisci "'" con "\ x27" nella stringa).