<!DOCTYPE html>
<html>
<head>
<title>Formulaire Legend avec validation | par NGLESSON </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Formulaire Legend avec validation">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Formulaire Legend avec validation</h2>
<fieldset class="scheduler-border">
<legend class="scheduler-border">Information personnelles</legend>
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="inputgenre" value="m" required>M
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="inputgenre" value="mme" required>Mme
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="inputgenre" value="mlle" required>Mlle
</label>
</div>
<div class="valid-feedback">valide.</div>
<div class="invalid-feedback">invalide.</div>
</div>
<div class="form-group">
<label for="inputname">Nom complet:</label>
<input type="text" class="form-control" id="inputname" placeholder="Nom complet" name="inputname" required>
<div class="valid-feedback">valide.</div>
<div class="invalid-feedback">invalide.</div>
</div>
<div class="form-group">
<label for="inputpays">Pays:</label>
<input type="text" class="form-control" id="inputpays" placeholder="Pays" name="inputpays" list="listpays" required>
<datalist id="listpays">
<option value="Maroc">Maroc</option>
<option value="France">France</option>
<option value="Canada">Canada</option>
</datalist>
<div class="valid-feedback">valide.</div>
<div class="invalid-feedback">invalide.</div>
</div>
<div class="form-group">
<label for="inputsituation">Situation familiaire:</label>
<select class="form-control" id="inputsituation" required>
<option value=""></option>
<option value="c">Célibataire</option>
<option value="e">En couple</option>
<option value="m">Marié</option>
</select>
<div class="valid-feedback">valide.</div>
<div class="invalid-feedback">invalide.</div>
</div>
<div class="form-group">
<label for="inputdate">Date de naissance:</label>
<input type="date" class="form-control" id="inputdate" placeholder="Date de naissance" name="inputdate" required>
<div class="valid-feedback">valide.</div>
<div class="invalid-feedback">invalide.</div>
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="10" cols="10" name="comment" id="comment" required></textarea>
<div class="valid-feedback">valide.</div>
<div class="invalid-feedback">invalide.</div>
</div>
<div class="form-group text-right mt-3">
<button type="reset" class="btn btn-danger btn-md"><i class="fa fa-times"></i> Annuler</button>
<button type="submit" class="btn btn-success btn-md"><i class="fa fa-save"></i> Enregistrer</button>
</div>
</form>
</fieldset>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #292929;
box-shadow: 0px 0px 0px 0px #292929;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add 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);
})();
