I have one form where I have 5 divs. One is always visible. The other four are kept hidden using style="visibility:hidden; position: absolute;", and can be made visible by calling add method and doing:

.css("visibility","visible")`) 

On-click of some link, and can be removed by calling remove method and doing:

.css("visibility","hidden");`

as well.

Every div has the same number of input fields (i.e. 2 input fields).

But when I submit the page, nothing happens, and when I show my next div (clicking over addNewDiv link), I see both the fields red with one message ("This field is required.") next to those fields.

I tried with style="display:none", but it didn't work, and the below approach also didn't work:

$('#myFormId').validate({ 
        ignore: ":hidden" 
});

I cannot really post the code here.

I have one form where I have 5 divs. One is always visible. The other four are kept hidden using style="visibility:hidden; position: absolute;", and can be made visible by calling add method and doing:

.css("visibility","visible")`) 

On-click of some link, and can be removed by calling remove method and doing:

.css("visibility","hidden");`

as well.

Every div has the same number of input fields (i.e. 2 input fields).

But when I submit the page, nothing happens, and when I show my next div (clicking over addNewDiv link), I see both the fields red with one message ("This field is required.") next to those fields.

I tried with style="display:none", but it didn't work, and the below approach also didn't work:

$('#myFormId').validate({ 
        ignore: ":hidden" 
});

I cannot really post the code here.

• javascript
• jquery
• html
• css

3 Answers 3

Since semicolon (:) is attribute in jquery and hidden is a CSS rule, you would want to add a class to all hidden fields and then toggle the class instead while adding the class to ignore like so:

$('#myFormId').validate({ 
   ignore: ".hidden" 
});

.hidden
{
    visibility: hidden;
}

I am thinking that you have html5 required attributes in the form elements that are hidden. Try putting this in where needed and removing the static required attribute. Multipart forms can be tricky on the back end as well. So be sure that you have set up the validation in accordance with the front end.

$('#fieldID').prop('required',true);

This one works fine

<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" style="display:none;" />
    <br/>
    <input type="submit" />
</form>


$(document).ready(function () {

    $('#myform').validate({
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

a {
    display: block;
    position: absolute;
    bottom: 0;
}

Demo is here!