<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row mb-3 mt-5"> <div class=" mx-auto col-md-6"> <div class="card shadow-lg bg-white"> <div class="card-header bg-info"> <h2 class="card-title text-center font-weight-bolder text-uppercase text-white-50">Registration Form</h2> </div> <div class="card-body"> <form action="userlogin" method="get" class="needs-validation" novalidate> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please type user name.</div> </div> <div class="form-group"> <label for="email">Email:</label> <input type="text" class="form-control" id="email" placeholder="Enter username" name="email" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please type email address.</div> </div> <div class="form-group " > <label class="font-weight-bold" for="pwd">Password</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please type password</div> </div> <div class="form-group " > <label class="font-weight-bold" for="pwd">Confirm Password</label> <input type="password" class="form-control" id="pwd" placeholder="Enter confirm password" name="pwd" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please type confirm password</div> </div> <div class="form-check"> <label class="form-check-label" for="radio1"> <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" required>Remember me <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <center class="mt-3"> <input type="submit" class="btn btn-info w-50" value="Register"> </center> </form> </div> </div> </div> </div> </div>

// 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); })();