2010-10-27 11 views
10

Ho una casella di controllo e un testo lo segue, come;
[casella di controllo] Sono d'accordojquery - come utilizzare errorPlacement per un elemento specifico?

Se la casella di controllo non viene cliccato al momento della presentazione, l'attuale modo di mostrare il msg di errore che ho è (io uso errorElement: "div");

[casella di spunta]
Questo campo è obbligatorio.
Sono d'accordo **

Preferirei;
[casella di controllo] Sono d'accordo
Questo campo è obbligatorio

Qualsiasi idea di come ottenere questo fatto ?.

Il wtml wrap per la casella di controllo interessata e gli elementi di testo che ho sono come questo;
[div] [casella di controllo] Sono d'accordo [/ div] [div] [/ div]

ho provato errorPlacment: come segue sperando di applicarla solo per questo elemento da solo;

...    
messages: { 
    usage_terms: { 
     required: "Must agree to Terms of Use.", 
    //errorElement: "div" 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent("div").next("div")); 
     } 
    } 
} 
... 


Non ha funzionato. Qualche idea?.

risposta

22

errorPlacement non è messaggi sottostanti (come opzione), è un'opzione globale, così invece si dovrebbe assomigliare a questa:

messages: { 
    usage_terms: "Must agree to Terms of Use." 
} 
errorPlacement: function(error, element) { 
    if(element.attr("name") == "usage_terms") { 
    error.appendTo(element.parent("div").next("div")); 
    } else { 
    error.insertAfter(element); 
    } 
} 

Ecco siamo solo controllando il nome dell'elemento al momento di decidere dove va , si potrebbe fare un altro controllo, ad esempio dando a tutti quelli che si comportano come questo una classe, e facendo element.hasClass("placeAfter").

+0

funziona come un fascino, grazie! – freedayum

+1

+1, bella spiegazione – SagarPPanchal

0

file html del file validate

<label for="Q008" class="control-label titular">Question text 008 by example</small></label> 
<input type="text" class="form-control" name="Q008" id="Q008" maxlength="500" /> 
<div id="Q008error"></div> 

<label class="control-label titular">Question text 009 by example</label> 
<div class="controls"> 
    <input type="checkbox" name="Q009" id="Q009_1" value="1" /> 
    <label for="Q009_1">Text 91</label> 
</div> 
<div class="controls"> 
    <input type="checkbox" name="Q009" id="Q009_2" value="2" /> 
    <label for="Q009_2">Text 92</label> 
</div> 
<div class="controls"> 
    <input type="checkbox" name="Q009" id="Q009_3" value="3" /> 
    <label for="Q009_3">Text 93</label> 
</div> 
<div class="controls"> 
    <input type="checkbox" name="Q009" id="Q009_4" value="4" /> 
    <label for="Q009_4">Text 94</label> 
</div> 
<div class="controls"> 
    <input type="checkbox" name="Q009" id="Q009_5" value="5" /> 
    <label for="Q009_5">Text 95</label> 
</div> 
<div class="controls"> 
    <input type="checkbox" name="Q009" id="Q009_6" value="6" /> 
    <label for="Q009_6">Text 96</label> 
</div> 
<div id="Q009error"></div> 

jquery

errorPlacement: function(error, element) { 
    var elementForm = "", containerError = ""; 
    offset = element.offset(); 
    elementForm = element.attr("name"); 
    containerError = "#" + elementForm + "error"; 
    error.prependTo(containerError); 
    error.addClass('message'); 
} 
Problemi correlati