Toggling field
← Examples
FormValidation does not validate the fields which:
- are disabled
- are hidden
- are not visible
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-xs-3 control-label">Full name <sup>*</sup></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Company <sup>*</sup></label>
<div class="col-xs-5">
<input type="text" class="form-control" name="company"
required data-fv-notempty-message="The company name is required" />
</div>
<div class="col-xs-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; margin-bottom: 15px;">
<div class="form-group">
<label class="col-xs-3 control-label">Job title <sup>*</sup></label>
<div class="col-xs-5">
<input type="text" class="form-control" name="job" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Department <sup>*</sup></label>
<div class="col-xs-5">
<input type="text" class="form-control" name="department" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Mobile phone <sup>*</sup></label>
<div class="col-xs-5">
<input type="text" class="form-control" name="mobilePhone" />
</div>
<div class="col-xs-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; margin-bottom: 15px;">
<div class="form-group">
<label class="col-xs-3 control-label">Home phone</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="homePhone" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Office phone</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="officePhone" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#togglingForm')
.formValidation({
framework: 'bootstrap',
icon: {
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'
}
}
}
}
})
.on('click', 'button[data-toggle]', function() {
var $target = $($(this).attr('data-toggle'));
$target.toggle();
if (!$target.is(':visible')) {
// Enable the submit buttons in case additional fields are not valid
$('#togglingForm').data('formValidation').disableSubmitButtons(false);
}
});
});
</script>