jquery validate - form - Jquery Validation plug-in error ubicación personalizada

jquery validate unobtrusive

Question

Usando el complemento jQuery Validation para la siguiente forma:

<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>

¿Cómo puedo colocar los errores dentro de las etiquetas de span? (# invalid-name, # invalid-email, # invalid-text)

Leí la documentación sobre la ubicación del error, pero no entendí cómo funciona. ¿Es posible manejar cada error individual y colocarlo en el elemento especificado?

Gracias

Answer 1

Descubrí que funciona el uso de .insertAfter en lugar de .appenTo:

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

Answer 2

Esta es una estructura básica, puede usar cualquier selector que desee en el método. Tiene el elemento de error y el elemento que no es válido.

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

O para apuntar a la ID, podrías hacer

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

No probado, pero debería funcionar.

Answer 3

Estoy usando la extensión de metadatos con el validador ... (nota, lo estoy configurando para usar el atributo de metadatos de datos en el marcado ...)

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

luego en código ...

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

He estado usando los metadatos para una gran cantidad de funcionalidades similares, que funcionan bastante bien ... nota, utilicé los ticks únicos (apóstrofes) alrededor de los metadatos, de esta manera puede usar un serializador JSON del lado del servidor para inyectar en esa parte de la etiqueta (que debería usar comillas dobles alrededor de las cadenas) ... un apos literal puede ser un problema, (reemplace "''" con "/ x27" en la cadena).

Answer 4

También puede agregar manualmente etiquetas de error en los lugares que las necesita. En mi caso particular, tenía una forma más compleja con listas de casillas de verificación, etc. donde una inserción o una inserción posterior rompía el diseño. En lugar de hacer esto, puede aprovechar el hecho de que el script de validación evaluará si existe una etiqueta de etiqueta existente para el campo especificado y la usará.

Considerar:

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

Ahora agrega la siguiente línea:

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

que es la etiqueta de error estándar:

<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 usará esta etiqueta en lugar de generar una nueva. Lo siento, no pude encontrar ninguna documentación oficial sobre esto, pero encontré otras publicaciones que encontraron este comportamiento.