CODEWITHSUNDEEP
jqueryjquery-validate
X9DESIGN
X9DESIGN

Reputation: 783

jquery validation when field in DIV with display:none

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/

Upvotes: 0

Views: 9238

Answers (1)

Sparky
Sparky

Reputation: 98758

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>

Upvotes: 4

Related Questions