Base Bootstrap

by godsnake

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<form id="form" method="post" action="">
  <input type="text" name="first" />
  <input type="text" name="second" />

  <input type="submit" class="button" value="Submit" />
</form>




<div class="mt-5 bg-dark h-100">

 
    <div class="w-100 m-0 p-0 mobiletitle sentence alert-danger error-message" id="message"></div>
  
  
  </div>

CSS

.error-message{display:none; color:red; margin-top:-5px!important; 
  display:none;
  position: relative; top: 0;
  padding: 0.4em !important;
  width: calc(98% - 0.8em);
}

JavaScript

jQuery(function($) {
  var validator = $('#form').validate({
    rules: {
      first: {
        required: true
      },
      second: {
        required: true
      }
    },
    messages: {},
    errorElement : 'div',
    errorLabelContainer: '.error-message'
  });
});