title: How to make validation work on Bootstrap v4 with Bootstrap validator?
body: <p>I just migrated to Bootstrap v4 from v3. And Bootstrap Validator is partially working. The JavaScript part still function. However, the styling is gone. </p>
  
  <p>this is the bootstrap validator I used: <a href="https://github.com/1000hz/bootstrap-validator" rel="nofollow noreferrer">https://github.com/1000hz/bootstrap-validator</a></p>
  
  <p>Here is how it looks: 
  <a href="https://i.stack.imgur.com/Nyc4j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nyc4j.jpg" alt="enter image description here"></a></p>
  
  <p>It was looked like this:
  <a href="https://i.stack.imgur.com/lXt5X.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lXt5X.jpg" alt="enter image description here"></a></p>
  
  <p>I manually added the css in. so the error messages work. </p>
  
  <p>Bootstrap validator already added the .has-danger class in. 
  How can I fix the label highlight and the input box highlight when error occured?</p>
  
  <p>I've converted all the classes according to BS4. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#inputFirstName').attr('data-required-error', uiData.Error_FieldRequired_FirstName);
  $('#inputLastName').attr('data-required-error', uiData.Error_FieldRequired_LastName);
  $('#inputPhone').attr('data-required-error', uiData.Error_FieldRequired_Phone);
  $('#inputEmail').attr('data-required-error', uiData.Error_FieldRequired_Email);
  $('#inputTitle').attr('data-required-error', uiData.Error_FieldRequired_Title);
  
  $('#inputPhone').attr('data-pattern-error', uiData.Error_InvalidPhone);
  $('#inputEmail').attr('data-pattern-error', uiData.Error_InvalidEmail);
  $('#inputEmail').attr('data-match-error', uiData.Error_InvalidEmail);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.help-block {
      color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  
  
  &lt;form data-toggle="validator" role="form" id="userForm"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputFirstName" class="form-control-label"&gt;First name&lt;/label&gt;
      &lt;input type="text" class="form-control" id="inputFirstName" value="" required&gt;
      &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputLastName" class="form-control-label"&gt;Last name&lt;/label&gt;
      &lt;input type="text" class="form-control" id="inputLastName" value="" required&gt;
      &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputPhone" class="form-control-label"&gt;Phone number&lt;/label&gt;
      &lt;input type="tel" class="form-control" id="inputPhone" pattern="\d{3}\.\d{3}\.\d{4}" value="" data-inputmask="'mask': '999.999.9999', 'showMaskOnFocus': 'false', 'showMaskOnHover': 'false'" required&gt;
      &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputEmail" class="form-control-label"&gt;Email address&lt;/label&gt;
      &lt;input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required&gt;
      &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputTitle" class="control-label"&gt;Position or title&lt;/label&gt;
      &lt;input type="text" class="form-control" id="inputTitle" required&gt;
      &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance!</p>