Как изменить только цвет сообщения об ошибке ввода формы управления

Question

Я пытаюсь оформить свой первый сайт. Я использую Bootstrap 4 и плагин проверки jquery, и сейчас я делаю форму. У меня две проблемы: во-первых, я хочу изменить только цвет сообщения об ошибке под моим вводом, но мой стиль изменяет размер / цвет текста и размер / цвет текста сообщения об ошибке, как я могу изменить только текст ошибки ниже input?

Второй вопрос: где в моем коде я могу изменить состояние элемента управления формы Bootstrap, в зависимости от действительного или нет?

Пока это мой код:

$('document').ready(function(){

    $('#registration_form').validate({
        rules: {
            username: {
                required: true,
                maxlength: 10,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            email_con: {
                required: true,
                equalTo: "#email"
            },
            password: {
                required: true,
                minlength: 7
            },
            password_con: {
                required: true,
                equalTo: "#password"
            },
            formCheck: {
                required: true
            },
        }
    });
});

        .error{
          color: red;
          font-Size: 13px;
        }

                                <div class="form-row form-group">
                                    <div class="col-sm-4 col-xl-3 text-center d-xl-flex justify-content-xl-center align-items-xl-center label-column"><label class="col-form-label">Email* :</label></div>
                                    <div class="col-sm-6 input-column"><input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com"></div>
                                </div>

Answer 1

Если вы хотите изменить цвет только на error text message, напишите как label.error{color: red;} и следуйте ниже html структура.

$(document).ready(function(){
  $('#registration_form').validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    }
  });
});

label.error{
  color: red;
  font-size: 13px;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

<div class="container my-2">
  <div class="row">
    <form class="col-sm-12" action="#" id="registration_form">
      <div class="form-row form-group">
        <div class="col-sm-4 text-sm-right">
          <label class="col-form-label" for="email">Email* :</label>
        </div>
        <div class="col-sm-6">
          <input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col-sm-6 offset-sm-4">
          <button type="submit" class="btn btn-success">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 2

Вы можете запустить фрагмент на полной странице и проверить этот ответ

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <p class="h1">Register</p>

  <form class="needs-validation" novalidate>
    <div class="form-group">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email"
             placeholder="E-mail" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        The e-mail is required!
      </div>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password"
             placeholder="Password" required minlength="6">
      <div class="valid-feedback">
        Great!
      </div>
      <div class="invalid-feedback">
        The password must contain at least 6 characters!
      </div>
    </div>

    <div class="form-group mt-3">
      <button class="btn btn-primary" type="submit">Register!</button>
    </div>
  </form>
</div>

<script>
  (function() {
    window.addEventListener('load', function() {
      var forms = document.getElementsByClassName('needs-validation');

      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

Answer 3

Существуют классы для работы с валидацией, когда дело доходит до bootstrap. Попробуйте вот так

<div class="container">
<p class="h1">Register</p>

<form class="needs-validation" novalidate>
<div class="form-group">
  <label for="email">E-mail</label>
  <input type="email" class="form-control" id="email"
         placeholder="E-mail" required>
  <div class="valid-feedback">
    Looks good!
  </div>
  <div class="invalid-feedback">
    The e-mail is required!
  </div>
</div>

<div class="form-group">
  <label for="password">Password</label>
  <input type="password" class="form-control" id="password"
         placeholder="Password" required minlength="6">
  <div class="valid-feedback">
    Great!
  </div>
  <div class="invalid-feedback">
    The password must contain at least 6 characters!
  </div>
</div>

<div class="form-group mt-3">
  <button class="btn btn-primary" type="submit">Register!</button>
</div>
</form>
</div>

<script>
(function() {
window.addEventListener('load', function() {
  var forms = document.getElementsByClassName('needs-validation');

  var validation = Array.prototype.filter.call(forms, function(form) {
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
}, false);
})();
</script>