htmlcsstwitter-bootstrap-4bootstrapvalidator

How to make validation work on Bootstrap v4 with Bootstrap validator?


I just migrated to Bootstrap v4 from v3. And Bootstrap Validator is partially working. The JavaScript part still function. However, the styling is gone.

this is the bootstrap validator I used: https://github.com/1000hz/bootstrap-validator

Here is how it looks: enter image description here

It was looked like this: enter image description here

I manually added the css in. so the error messages work.

Bootstrap validator already added the .has-danger class in. How can I fix the label highlight and the input box highlight when error occured?

I've converted all the classes according to BS4. Here is my 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);
.help-block {
    color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />



<form data-toggle="validator" role="form" id="userForm">
  <div class="form-group">
    <label for="inputFirstName" class="form-control-label">First name</label>
    <input type="text" class="form-control" id="inputFirstName" value="" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputLastName" class="form-control-label">Last name</label>
    <input type="text" class="form-control" id="inputLastName" value="" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPhone" class="form-control-label">Phone number</label>
    <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>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="form-control-label">Email address</label>
    <input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputTitle" class="control-label">Position or title</label>
    <input type="text" class="form-control" id="inputTitle" required>
    <div class="help-block with-errors"></div>
  </div>
</form>

Thanks in advance!


Solution

  • First your script files are not in order...jQuery should be on top...and you have used bootstrap-validator two times..No need...

    And answer to your question is you have to use has-danger class to style the label

    .form-group.has-error.has-danger .form-control-label {
      color: red;
    }
    .form-group.has-error.has-danger .form-control{
      border: 1px solid red;
      box-shadow: 0 0 0 0.2rem rgba(250, 16, 0, 0.18);
    }
    

    Stack Snippet

    $('#userForm').validator();
    .help-block {
      color: red;
    }
    
    .form-group.has-error.has-danger .form-control-label {
      color: red;
    }
    
    .form-group.has-error.has-danger .form-control {
      border: 1px solid red;
      box-shadow: 0 0 0 0.2rem rgba(250, 16, 0, 0.18);
    }
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    
    <form data-toggle="validator" role="form" id="userForm">
      <div class="form-group">
        <label for="inputFirstName" class="form-control-label">First name</label>
        <input type="text" class="form-control" id="inputFirstName" value="" required>
        <div class="help-block with-errors"></div>
      </div>
      <div class="form-group">
        <label for="inputLastName" class="form-control-label">Last name</label>
        <input type="text" class="form-control" id="inputLastName" value="" required>
        <div class="help-block with-errors"></div>
      </div>
      <div class="form-group">
        <label for="inputPhone" class="form-control-label">Phone number</label>
        <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>
        <div class="help-block with-errors"></div>
      </div>
      <div class="form-group">
        <label for="inputEmail" class="form-control-label">Email address</label>
        <input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
        <div class="help-block with-errors"></div>
      </div>
      <div class="form-group">
        <label for="inputTitle" class="form-control-label">Position or title</label>
        <input type="text" class="form-control" id="inputTitle" required>
        <div class="help-block with-errors"></div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>