jquery validation when field in DIV with display:none

Question

I got problem on fields with display:none ... I need that after click on submit form button the error message will appear even if the field to validate is in div with display:none setting. I find solution and try to add to the jQuery code setting

ignore: []

but this not change anything. Look at the div with class named 'moreurlinput', he got inline style display:none, but if you change this to display:inline (block,table etc.) the error of validation appear.

html

<form id="post" action="http://m.onet.pl" method="post" class="validatedForm">
<div class="moreurlinput" style="display:none">
    <input class="moreurl center" type="text" name="moreurl" id="moreurl" />
</div>
<div>
    <button type="submit" />Add</button>
</div>
</form>

jquery

jQuery('.validatedForm').validate({
errorElement: "div",
errorClass: 'validate-error',
rules: {
    "moreurl": {
        required: true
    }
},
messages: {
    moreurl: "Please define 'More' URL value"
}

});

HERE: http://jsfiddle.net/Lprn89o8/2/

Sparky · Accepted Answer · 2015-01-10 05:45:22Z

4

Validation is working exactly as expected. Your whole problem is that the error element is also inside of your hidden div so the message cannot be seen.

The solution is to use the errorPlacement option to place the message outside of your hidden div.

errorPlacement: function(error, element) {
    error.insertAfter($(element).parent());
},

You also need the ignore: [] option so that nothing is ignored and your hidden element is validated.

Working DEMO: http://jsfiddle.net/Lprn89o8/4/

An alternative solution would simply move display:none to the input element, allowing the div to remain visible.

Alternative: http://jsfiddle.net/Lprn89o8/5/

EDIT:

The HTML for your button element is invalid. You should not use a "self-closing" tag since the <button> element itself is a container that has a closing tag.

<button type="submit" />Add</button>

should be...

<button type="submit">Add</button>

edited Jan 10, 2015 at 5:45

answered Jan 10, 2015 at 5:25

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery validation when field in DIV with display:none

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related