How to disable bootstrap 4 validation style from valid controls
I, for one, do not like overriding the CSS style so you could also choose to just specify which fields to validate instead of the entire form.
Add a class to your .form-group element (e.g. .validate-me)
<form class="container needs-validation" novalidate>
<div class="form-group row mt-5 validate-me">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" formnovalidate="formnovalidate" id="address" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
</div>
</form>
Now change your JavaScript slightly, retrieve all the form-groups with the validate-me class and instead of calling form.classList.add('was-validated') loop through all the captured form-groups and add was-validated to them instead.
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Get all form-groups in need of validation
var validateGroup = document.getElementsByClassName('validate-me');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
//Added validation class to all form-groups in need of validation
for (var i = 0; i < validateGroup.length; i++) {
validateGroup[i].classList.add('was-validated');
}
}, false);
});
}, false);
You might want to look at this answer.
Specifically, instead of adding .was-validated to the entire form, only add .is-invalid to the form elements which have the :invalid pseudo-class.
This code should work in your case:
for (var i = 0; i < validateGroup.length; i++) {
var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
for (var j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
}
}
You can override css of the is-valid validation. When you right click on the green check box and choose inspect you can see which class is causing the green light
So you should specify to not inherit those from bootstrap. The code should be like this :
<!DOCTYPE html>
<html>
<head>
<style>
.form-control.is-valid:focus, .was-validated :valid.form-control{ border-color:inherit !important;
background-image: inherit !important;
box-shadow:inherit !important;}
</style>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test Page</title>
<script type="text/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<form class="container needs-validation" novalidate id="myFrom" >
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
</div>
</form>
</body>
</html>
What I added is the style tag and css options below the head tag.