JSFiddle - React, Tailwind, and code Playground

by David DeLella

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript">
  $(document).ready(function () {

    $.validator.setDefaults({
      errorElement: 'div',
      errorPlacement: function (error, element) {
        error.appendTo(element.parent("div")).addClass("invalid-feedback error-margin");
      },
      submitHandler: function (form) {
        form.submit();
      }
    });
  });
</script>

<div style="padding: 15px;">
  <form name="HomeForm" method="post" novalidate>
    <div class="container-fluid">
      <div class="form-row">
        <div class="col-md">
          <div class="form-group material-design">
            <label for="Email">Email</label>
            <input class="form-control error" id="Email" name="Email" placeholder=" " type="text" value="" aria-invalid="true">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="col-md">
          <div class="form-group">
            <button type="submit" class="btn btn-primary">Solve</button>
          </div>
        </div>
      </div>
    </div>
  </form>

  <script type="text/javascript">
    $("form[name='HomeForm']").validate({
      rules: {
        Email: {
          required: true,
          email: true
        }
      },
      messages: {
        Email: {
          required: "Must provie an email address"
        }
      }
    });
  </script>
</div>