Validación de Jquery en el complemento "entrada de etiquetas"

Estoy haciendo uso de la popular Complemento de validación jquery de Bassistance para validar mis formularios. En el mismo formulario estoy haciendo uso de Complemento de entrada de etiquetas jQuery de xoxco.

Puedo validar todos los campos de formulario en mi formulario, excepto el que está siendo utilizado por el complemento de "entrada de etiquetas".

La razón es que la entrada original está oculta y el complemento dibuja otras nuevas.

Ejemplo de jsFiddle

Se agradecería cualquier ayuda para aplicar mi estilo de validación a la entrada de etiquetas, gracias

preguntado el 29 de junio de 12 a las 20:06

4 Respuestas

Dos problemas:

  1. Todos sus campos deben tener un name. Validate no se comportará correctamente si el atributo no está allí.
  2. Debes validar campos ocultos en tu caso. Lo que querrás hacer es usar ignore: [] para incluir la validación de campos ocultos.

En general, su código debería verse así:

HTML:

<form id="someForm" name="someForm" method="post">
    <input type="text" name="required-field" class="required"/>
    <input id="tagsx" type="text" name="tags" class="required" />
    <input type="submit" value="submit"/>
</form>

JavaScript:

$(document).ready(function () {
    $("#someForm").validate({
        ignore: []
    });
    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html'
    });
});

Ejemplo: http://jsfiddle.net/5eC5B/

Tenga en cuenta que tendrá que usar errorPlacement o similar para que el mensaje de error se muestre correctamente.

Respondido 02 Jul 12, 19:07

Esta es una respuesta genial. Una especie de "manual faltante" para jquery.validate - user776686

Puede hacer un truco validando un campo de texto ficticio con un método personalizado que validará su campo de etiqueta.

HTML:

<form id="someForm" name="someForm" method="post">
    <input type="text" id="txt1" name="txt1"/>
    <input id="tagsx" name="tagsx" type="text" />
    <input id="dummy" name="dummy" type="text" /><!-- dummy text field -->
    <input type="submit" value="submit"/>
</form>

CSS:

/*To hide dummy text field*/
#dummy{
    visibility: hidden!Important;
    height:1px;
    width:1px;
}

JavaScript:

$(document).ready(function () {

    $.validator.addMethod("checkTags", function(value) { //add custom method
        //Tags input plugin converts input into div having id #YOURINPUTID_tagsinput
        //now you can count no of tags
        return ($("#tagsx_tagsinput").find(".tag").length > 0);
    });

    $("#someForm").validate( {
        rules: {
            txt1:"required",
            dummy:"checkTags"
        },
        messages: {
            txt1: "Required",
            dummy: "Required"
        }
    });

    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html' 
    });
});

Respondido 09 Jul 12, 11:07

Me gusta este enfoque, sin embargo, para hacer las cosas justas por la generosidad, ¿puedes poner en marcha un ejemplo de jsfiddle? gracias - estoico

La configuración predeterminada del plugin de validación es ignore: ":hidden" que usa jQuery.not() para excluir todo de la opción de ignorar.

Si desea incluir campos ocultos, puede usar esto:

$("#myform").validate({
   ignore: ""
});

En su caso, use este código Javascript:

$(document).ready(function () {
    $("#someForm").validate({
       ignore: ""
    });
    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html'
    });
});

Actualizar: Como vi en el código de validación, el name-El atributo es muy necesario, porque el complemento almacena todo con el name. Incluso si agregas solo ignore: "" a su código, dará un error de validación, porque está almacenado con el mismo name y el nombre es null.

Aquí hay un JSFiddle en funcionamiento:

JSFiddle

Respondido 06 Jul 12, 15:07

La validación de jQuery ignora de forma predeterminada los campos que no están visibles. Para anular este comportamiento, use $("#someForm").validate({ignore:""});

Respondido 02 Jul 12, 17:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.