JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <div class="container py-5">  
            <div class="row">  
                <div class="offset-md-2 col-md-8 offset-md-2">  
                    <div class="card">  
                        <div class="card-header bg-primary text-white">  
                            <h4 class="card-title text-uppercase">Employee Form</h4>  
                        </div>  
                        <div class="card-body">  
                            <form id="needs-validation" novalidate>  
                                <div class="row">  
                                    <div class="col-sm-6 col-md-6 col-xs-12">  
                                        <div class="form-group">  
                                            <label for="firstname">First Name</label>  
                                            <input type="text" id="firstname" placeholder="First Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
                                            <div class="invalid-feedback">  
                                                Please enter first name.  
                                            </div>  
                                        </div>  
                                    </div>  
                                    <div class="col-sm-6 col-md-6 col-xs-12">  
                                        <div class="form-group">  
                                            <label for="lastname">Last Name</label>  
                                            <input type="text" id="lastname" placeholder="Last Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
   ...

JavaScript

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