2

tengo un problema debido de que no quiero que se me valide un campo en un formulario estando oculto pero sin embargo si me lo valida y me da error. Mi .html sería algo como esto:

    <div th:id="'valorVariable2' + ${iterStatus.index+1}" class="col-lg-5 valor2-div"
        th:classappend="${!#lists.isEmpty(#fields.errors('valoresEntradaCom[__${iterStatus.index}__].value')) ? 'has-error' : ''}">
        <br>
        <label id='myIdLabel2' class="control2-label">[[#{solicitude.new.input.value_label}]]:</label>
        <input type="text" class="form-control valor-reg2 writable required" readonly 
            th:name="${solicitude.valoresEntradaCom[__${iterStatus.index}__].value}"
            th:field="${solicitude.valoresEntradaCom[__${iterStatus.index}__].value}" 
        />
        <th:block th:replace="fragments/field_errors :: errors ('valoresEntradaCom[__${iterStatus.index}__].value')" />
    </div>  

Esta es la parte de mi código en javascript donde en funcion de la opcion seleccionada lo ocultará o no. Para ocultarlo utilizo .hide()

    if ($this.find('option:selected').text() == 'IP') {
        $(".valor2-div").show();
    } else {
        $(".valor2-div").hide();
    }

Con el siguiente código trato de no validar en el formulario los campos deshabilitados u ocultos.

    var form = $("#solicitude-create-form"); 
        var valorvalidaciones = "";

        $("#wizard").steps({
            headerTag: "h2",
            bodyTag: "section",
            transitionEffect: "slideLeft",

            onInit: function() {
                $('.actions ul').prepend($('.btn-steps').find('li'));
                $('.btn-steps').remove();
            },

            onStepChanging: function (event, currentIndex, newIndex) {
    form.validate({
        ignore:  ":hidden"
    });
    ...
})

Como comento, a pesar de esto me lo valida y me da error. ¿Alguien sabe que puede estar fallando o si hay alguna otra manera de hacer esto?

Muchas gracias de antemano.

Saludos!

2 respuestas 2

0

Añadiendo el atributo a la etiqueta a validar formnovalidate="formnovalidate"

<input type="text" class="form-control valor-reg2 writable required" readonly 
        th:name="${solicitude.valoresEntradaCom[__${iterStatus.index}__].value}"
        th:field="${solicitude.valoresEntradaCom[__${iterStatus.index}__].value}" 
    formnovalidate="formnovalidate"/>

o bien añade la el atributo disabled al input

if ($this.find('option:selected').text() == 'IP') {
    $(".valor2-div").show();
    $(".valor2-div > input").removeAttr('disabled');
} else {
    $(".valor2-div").hide();
    $(".valor2-div > input").attr('disabled', 'disabled');
}
3
  • ¿El resto si estaría correcto? Me lo sigue validando con esa etiqueta también :S
    – Mr.Z
    el 6 ago. 2018 a las 7:08
  • prueba lo que te he puesto en la edición del mensaje
    – jld
    el 6 ago. 2018 a las 7:22
  • Gracias por tu respuesta Jorge. Entiendo que algo más tengo que tener por ahí porque con esto me lo sigue validando también. Porque sería correcto atacar a la etiqueta "valor2-div" tal y como estoy haciendo ¿no?
    – Mr.Z
    el 6 ago. 2018 a las 8:14
0

Para ignorar elementos en la validación deberías de llamar al método de validación de la siguiente forma:

onStepChanging: function (event, currentIndex, newIndex) {
    form.validate({
        ignore:  ":hidden"
    });
    ...
})

Tal y como se describe en la documentación:

https://jqueryvalidation.org/validate/

El pseudo selector ":hidden" de JQuery debería ser apropiado tendiendo en cuenta que el método hide() aplica un estilo "display: none" y el pseudo selector tiene en cuenta los elementos con ese estilo, como puedes ver en:

http://api.jquery.com/hide/

https://api.jquery.com/hidden-selector/

Tan solo quedaría pendiente asegurar que estás llamando al método validate (ésto podría no ocurrir si onStepChanging nunca fuera invocado).

Un saludo.

3
  • Muchas gracias por tu respuesta Roberto, he editado el mensaje con lo que me has dicho, por lo que en principio tal y como está debería de funcionar no? El caso es que me lo sigue validando. ¿Sería correcto atacar a la etiqueta "valor2-div" del "div" tal y como estoy haciendo? Tengo poca experiencia con javascript y problema podría ser cualquier cosa.
    – Mr.Z
    el 6 ago. 2018 a las 8:11
  • Yo pondría un punto en la llamada a hide, si, pero me parece bastante más interesante ver el comportamiento de la llamada validate(). Dentro de unas seis horas le echaré un vistazo más en profundidad. Ahora que caigo es posible que el pseudoselector de jquery no se tenga en cuenta. Por favor asigna una clase a la etiqueta que no quieras validar, como "my-ignore-class". En la llamada a validate, prueba a filtrar por tu clase: { ignore: ".my-ignore-class"} . De esta forma podemos averiguar si se tiene en cuenta o no el pseudoselector y actuar en consecuencia. el 6 ago. 2018 a las 8:47
  • Gracias de nuevo Roberto. Lo de asignarle una clase a la etiqueta como comentas fue de lo primero que hice y tampoco conseguí que me la ignorase. Hacia "$(".valor-reg2").addClass('ignore');" cuando quería que no la validara y "$(".valor-reg2").removeClass('ignore');" para validarla y después: $("#form").validate({ ignore: ".ignore" }) Perdí también bastante tiempo con esto y ya no sé que más probar la verdad.
    – Mr.Z
    el 6 ago. 2018 a las 9:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.