Ignore hidden input in a form

Question

Ignore hidden input in a form

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a problem because I do not want to validate a field in a form being hidden but nevertheless if you validate it and I get an error. My .html would look something like this:

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

This is the part of my code in javascript where, depending on the selected option, it will hide it or not. To hide it I use .hide ()

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

With the following code I try not to validate in the form the disabled or hidden fields.

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

As I comment, in spite of this he validates it and gives me an error. Does anyone know that it may be failing or is there some other way to do this?

Thank you very much in advance.

Greetings!

javascript jquery jquery-validate

asked by Mr.Z 06.08.2018 в 08:42

source

2 answers

Error saving Ansible Tower (AWX) status Error: watchdog watchdog0: watchdog did not stop!

score 0 · Answer 1

Adding the attribute to the tag to validate 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"/>

or add the disabled attribute to the 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');
}

score 0 · Answer 2

To ignore elements in the validation you should call the validation method as follows:

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

As described in the documentation:

link

The pseudo selector ": hidden" of JQuery should be appropriate taking into account that the hide () method applies a "display: none" style and the pseudo selector takes into account the elements with that style, as you can see in:

link

It would only be pending to ensure that you are calling the validate method (this could not happen if onStepChanging was never invoked).

Greetings.