Basic Validation

Use HTML5 required validation with Bootstrap styling.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<form class="needs-validation" novalidate>

<div class="mb-3">
<label class="form-label">Name</label>
<input class="form-control" required>
<div class="invalid-feedback">
Please enter your name.
</div>
</div>

<button class="btn btn-primary">Submit</button>

</form>

</div>

<script>
(function(){
"use strict";
var forms=document.querySelectorAll(".needs-validation");
Array.prototype.slice.call(forms).forEach(function(form){
form.addEventListener("submit",function(event){
if(!form.checkValidity()){
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},false);
});
})();
</script>

</body>
</html>

More BS5 Form Validation Examples (7)

Signup Form Validation

Email Validation →