NiceSnippets.com
Bootstrap 4 form validation with form all input example
In this demo we explain how to validate form using bootstrap 4. we display all the input with validation. in this form group example we display validation with error. this example work on bootstrap 4 jquery. before form submit all the validation are checiked. this validation error and success message display with two class "invalid-feedback" and "valid-feedback".
also you can use in this form feedback form, product form, user detail form, employee from, review from, login form, register form etc.. you can easily use in this form.
you can get code of bootstrap form validation example snippet. we give you example of bootstrap form design , you can simple copy bellow code and use in your project. If it free snippets of bootstrap form-control width So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap 4 form validation example snippets, click on JS Code tab get code of jquery code for bootstrap 4 form validation jquery snippets, same as for CSS Code tab. It's pretty easy and simple example of bootstrap 4 form validation not working snippet.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-lg-2 col-lg-8 col-sm-8 col-8 border rounded main-section">
<h3 class="text-center text-inverse">Form Validation</h3>
<hr>
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="text-inverse" for="validationCustom01">First Name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="First Name" required>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="text-inverse" for="validationCustom02">Last Name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Last Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-12">
<div class="form-group">
<label class="text-inverse" for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email" required>
<div class="invalid-feedback">
Please provide a valid Email.
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="text-inverse" for="inputpassword">Password</label>
<input type="password" class="form-control" id="inputpassword" placeholder="password" required>
<div class="invalid-feedback">
Please provide a valid password.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="text-inverse" for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="text-inverse" for="select-menu">Select any value</label>
<select class="custom-select d-block form-control" id="image" required>
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">
Please selected any option.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="custom-file">
<input type="file" id="file" class="form-control custom-file-input" required>
<span class="custom-file-control"></span>
<div class="invalid-feedback">
Please selected any File.
</div>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" required>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="custom-control custom-radio">
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-12">
<div class="form-group">
<label class="custom-control custom-radio">
<input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Or toggle this other custom radio</span>
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12 col-sm-12 col-12 text-center">
<button class="btn btn-info" type="submit">Submit form</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
body{
background: #B8850B;
padding-top: 30px;
}
.main-section{
padding: 15px;
background:#f1f1f1;
}
.custom-file-control::after {
content: "Choose file...";
}
.custom-file-control::before {
content: "Browse";
}
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
