Disabling required when form field inside div with display none

I have a form where the form elements are grouped in several divs.
Depending on user choices certain divs will display and others will have display:none.

I want some fields to be required but only when the surrounding div has the value display: block.

Is there a way to do this?

This is my validation code…

$(function () {
$('#order-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "orderemail.php";
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
 var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
// empty the form
return false;

what plugin is that? (The default jQuery validation plugin would use validate, not validator.)

If you ARE using the jQuery Validator plugin, once you’ve fixed the call, you’ll find that it defaults to ignoring hidden fields.

I am using the Bootstrap validator

Another issue is that it is the div containing the fields that are hidden rather than the fields themselves, but made visible if the user checks a radio button.

I assume by that you mean https://1000hz.github.io/bootstrap-validator/ that validator.

In which case, you can see that the default validation selector is $.fn.validator.Constructor.INPUT_SELECTOR = ':input:not([type="hidden"], [type="submit"], [type="reset"], button)'

in which case you should be able to just add :hidden to that list.
$.fn.validator.Constructor.INPUT_SELECTOR = ':input:not([type="hidden"], [type="submit"], [type="reset"], button, :hidden)'

1 Like

That has worked a treat. Thanks for your help

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.