2010-10-27 29 views
10

Tengo una casilla de verificación y un texto lo sigue, como;
[casilla] Estoy de acuerdojquery - cómo usar errorPlacement para un elemento específico?

Si la casilla de verificación no se hace clic en el momento de presentar, la actual forma de mostrar el error msg que tengo es (yo uso errorElement: "div");

[casilla de verificación]
Este campo es obligatorio.
Acepto **

Me gustaría;
[casilla] Estoy de acuerdo
Este campo es obligatorio

alguna idea de cómo hacer esto ?.

La envoltura html para los elementos de casilla de verificación y de texto en cuestión que tengo es así;
[div] [casilla] Estoy de acuerdo [/ div] [div] [/ div]

Probé errorPlacment: de la siguiente manera con la esperanza de aplicarlo sólo para ese elemento por sí solo;

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


No funcionó. ¿Alguna idea?.

Respuesta

22

errorPlacement es No mensajes debajo (como opción), que es una opción global, por lo contrario, debería tener este aspecto:

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); 
    } 
} 

He aquí sólo estamos leyendo el nombre del elemento de la hora de decidir dónde va , podría hacer otro chequeo, por ejemplo dando todos los que se comportan como esto una clase, y haciendo element.hasClass("placeAfter").

+0

funciona como un encanto, gracias! – freedayum

+1

+1, buena explicación – SagarPPanchal

0

archivo html archivo de validación

<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'); 
} 
Cuestiones relacionadas