BootstrapValidator does not validate the fields which:
The following example shows an example of toggling field validator.
Try to click the Add more info or Add more phone numbers button to enable/disable the additional fields. Also, look at state of the Validate button based on the validity of additional fields.
<form id="togglingForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Full name <sup>*</sup></label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Company <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="company"
required data-bv-notempty-message="The company name is required" />
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-info btn-sm" data-toggle="#jobInfo">
Add more info
</button>
</div>
</div>
<!-- These fields will not be validated as long as they are not visible -->
<div id="jobInfo" style="display: none;">
<div class="form-group">
<label class="col-lg-3 control-label">Job title <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="job" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Department <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="department" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile phone <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="mobilePhone" />
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-info btn-sm" data-toggle="#phoneInfo">
Add more phone numbers
</button>
</div>
</div>
<!-- These fields will not be validated as long as they are not visible -->
<div id="phoneInfo" style="display: none;">
<div class="form-group">
<label class="col-lg-3 control-label">Home phone</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="homePhone" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Office phone</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="officePhone" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>$(document).ready(function() {
$('#togglingForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
company: {
validators: {
notEmpty: {
message: 'The company name is required'
}
}
},
// These fields will be validated when being visible
job: {
validators: {
notEmpty: {
message: 'The job title is required'
}
}
},
department: {
validators: {
notEmpty: {
message: 'The department name is required'
}
}
},
mobilePhone: {
validators: {
notEmpty: {
message: 'The mobile phone number is required'
},
digits: {
message: 'The mobile phone number is not valid'
}
}
},
// These fields will be validated when being visible
homePhone: {
validators: {
digits: {
message: 'The home phone number is not valid'
}
}
},
officePhone: {
validators: {
digits: {
message: 'The office phone number is not valid'
}
}
}
}
})
.find('button[data-toggle]')
.on('click', function() {
var $target = $($(this).attr('data-toggle'));
// Show or hide the additional fields
// They will or will not be validated based on their visibilities
$target.toggle();
if (!$target.is(':visible')) {
// Enable the submit buttons in case additional fields are not valid
$('#togglingForm').data('bootstrapValidator').disableSubmitButtons(false);
}
});
});