Recently, I made the switch from Bootstrap v3 to v4, and although the JavaScript part of Bootstrap Validator is still functioning properly, the styling seems to have disappeared.
The bootstrap validator that I utilized can be found here.
This is how it currently looks: https://i.sstatic.net/Nyc4j.jpg
Previously, it appeared like this: https://i.sstatic.net/lXt5X.jpg
To ensure that error messages are displayed correctly, I manually added the CSS. However, the label highlight and input box highlight do not seem to be working as expected when an error occurs.
All classes have been converted according to BS4 in my code:
$('#inputFirstName').attr('data-required-error', uiData.Error_FieldRequired_FirstName);
$('#inputLastName').attr('data-required-error', uiData.Error_FieldRequired_LastName);
$('#inputPhone').attr('data-required-error', uiData.Error_FieldRequired_Phone);
$('#inputEmail').attr('data-required-error', uiData.Error_FieldRequired_Email);
$('#inputTitle').attr('data-required-error', uiData.Error_FieldRequired_Title);
$('#inputPhone').attr('data-pattern-error', uiData.Error_InvalidPhone);
$('#inputEmail').attr('data-pattern-error', uiData.Error_InvalidEmail);
$('#inputEmail').attr('data-match-error', uiData.Error_InvalidEmail);.help-block {
color: red;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form data-toggle="validator" role="form" id="userForm">
<div class="form-group">
<label for="inputFirstName" class="form-control-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputLastName" class="form-control-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPhone" class="form-control-label">Phone number</label>
<input type="tel" class="form-control" id="inputPhone" pattern="\d{3}\.\d{3}\.\d{4}" value="" data-inputmask="'mask': '999.999.9999', 'showMaskOnFocus': 'false', 'showMaskOnHover': 'false'" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail" class="form-control-label">Email address</label>
<input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputTitle" class="control-label">Position or title</label>
<input type="text" class="form-control" id="inputTitle" required>
<div class="help-block with-errors"></div>
</div>
</form>Thank you for your help!