ParsleyJS

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.8.0/dist/parsley.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
  <div class="container form-container col-lg-12">
    <form class="form_data" role="form" id="needs-validation" data-toggle="validator">
      <h1 class="text-center"> Contact us </h1>
      <div class="form-group center-block">
        <label for="input--email" class="form-labels">Email address</label>
        <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="norman-geller@email.com" data-error="Please provide a valid email." required>
        <div class="help-block with-errors"></div>
        <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
      </div>
      <div class="form-group center-block">
        <label for="inputName" class="form-labels">name</label>
        <input type="text" name="name"  pattern="[a-zA-Z]+" data-pattern-error="Characters only." class="form-control form-
        control-lg" placeholder="Norman Geller" required id="input--name">
      <div class="help-block with-errors"></div>
      </div>
      <div class="form-group center-block">
        <label for="inputZipCode" class="form-labels"> Zip code</label>
        <input type="text" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required id="input--zip" data-bv-integer="true" pattern="^[0-9]+$" data-pattern-error="Numbers only">
      <div class="help-block with-errors"></div>
      </div>
      <button...

CSS

.parsley-errors-list {
            list-style-type: none;
            padding: 0;
        }
        .parsley-errors-list li {
            list-style: none;
            color: #f96a74;
            margin-top: 5px;
            padding-left: 20px;
            font-weight: 500;
            font-size: 13px;
            position: relative;
        }
        .parsley-errors-list > li:before {
            content: "\f057";
            font-family: FontAwesome;
            position: absolute;
            left: 2px;
            top: 0;
        }

JavaScript

$("form").parsley();