Bootstrap form validation disable my radio buttons - forms

Question

I use boostrap form validation on my form for 2 input text only (I do not want to validate radio button).
My problem is that when displaying errors on the input text (a value is required), it disables the radio button and even change the color of the radio button text. How to avoid that ?
Here is the code
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance"
name="txtDateNaissance" data-provide="datepicker"
placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required"/>
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
in JS :
$( document ).ready(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);
})();
After investigating, the problem seems to with the all the custom classes because it works good if I use form-check classes (so normal button : it is ugly but it works).

Answer 1

Here I placed the radio and submit button outside the form with the help of form attribute
$(document).ready(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);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<form class="needs-validation" id="formid" novalidate>
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance" name="txtDateNaissance" data-provide="datepicker" placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required" />
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
</form>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<button class="btn btn-primary" form="formid" type="submit">Submit form</button>
Using custom class custom-radio-primary
$(document).ready(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);
/* custom-radio-primary escapes validation with primary color */
.custom-radio-primary label {
color: #212529!important;
}
.custom-radio-primary .custom-control-input:checked~.custom-control-label::before {
border-color: #007bff!important;
background-color: #007bff!important;
}
.custom-radio-primary .custom-control-input~.custom-control-label::before {
border: #adb5bd solid 1px!important;
}
.custom-radio-primary .custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25)!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<form class="needs-validation" id="formid" novalidate>
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance" name="txtDateNaissance" data-provide="datepicker" placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required" />
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio custom-radio-primary">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio custom-radio-primary">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
<button class="btn btn-primary" form="formid" type="submit">Submit form</button>
</form>