Проверка формы: boxshadow, изменение цвета границы в полях ввода

Question

У меня есть два поля, одно из которых является обязательным, а другое необязательным.

1. На данный момент, в обязательном поле у ​​меня есть красная рамка слева. Когда я вводю текст, границаявляется зеленым, что правильно.

Но если пользователь не вводит значение и переходит к следующему полю, я хотел бы иметь красную рамку со всех сторон и сообщение об ошибке.

В необязательном поле, если пользователь не вводит данные, это нормально.Но если пользователь вводит неверные данные, я хотел бы проверить и дать красную рамку и сообщение об ошибке.

Может кто-нибудь помочь, пожалуйста?

Спасибо.

.simple-form input:optional {
  border-left: 5px solid #999;
}

.simple-form input:required {
  border-left: 5px solid palegreen;
}
.simple-form input:invalid {

  border-left: 5px solid red;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(153, 153, 153, 0.8) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(153, 153, 153, 0.6) !important;
  outline: 0 none !important;
}


textarea:required:focus,
input[type="text"]:required:focus,  
input[type="password"]:required:focus,
input[type="datetime"]:required:focus,
input[type="datetime-local"]:required:focus,
input[type="date"]:required:focus,
input[type="month"]:required:focus,
input[type="time"]:required:focus,
input[type="week"]:required:focus,
input[type="number"]:required:focus,
input[type="email"]:required:focus,
input[type="url"]:required:focus,
input[type="search"]:required:focus,
input[type="tel"]:required:focus,
input[type="color"]:required:focus,
.uneditable-input:required:focus{   
  border-color: rgba(153, 153, 153, 0.8) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(153, 153, 153, 0.6) !important;
  /*border-color: rgba(255, 0, 0, 0.8) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6) !important;*/
  outline: 0 none !important;
}

.mandatory {
  content:"*";
  color:red;
}

<div class="container py-5" id="form-registration"> 
        <div class="row borderboxform">
            <div class="col-md-12 mx-auto"> 
              <!-- form starts -->
              <form class="simple-form">
                  <div class="col-sm-12">
                    <!------------------ personal information starts -------------------->
                    <div class="form-group row rowcolor1">
                      <div class="col-sm-12">
                        <div class="row mb-4">
                          <div class="col-sm-6 has-error">
							<div class="row">
                              
							  <div class="col-sm-12">
							  <label for="inputFirstname">Retailer Name <span class="mandatory">*</span></label>
							  <input type="text" class="form-control mandatory-input-bg" id="inputRetailerName" placeholder="" required>
							  </div>
							  <div class="col-sm-12">
								<small id="passwordHelp" class="text-danger px-1">
								  Enter Retailer Name
								</small> 
							  </div>
							</div>
                          </div>
                          <div class="col-sm-6">
                                <label for="inputFirstname">E-Mail</label>
                                <input type="text" class="form-control" id="inputEmail" placeholder="">
                            </div>

                           
                          

                            

						</div>
					  
                      </div>
					  
					  <div class="col-sm-12">
                    <!------------------ personal information starts -------------------->
                    <div class="form-group row rowcolor1">
                      <div class="col-sm-12">
                        <div class="row mb-4">
                          <div class="col-sm-6 has-error">
							<div class="row">
                              
							  <div class="col-sm-12">
							  <label for="inputFirstname">Retailer Name <span class="mandatory">*</span></label>
							  <input type="text" class="form-control mandatory-input-bg" id="inputRetailerName" placeholder="" required>
							  </div>
							  <div class="col-sm-12">
								<small id="passwordHelp" class="text-danger px-1">
								  Enter Retailer Name
								</small> 
							  </div>
							</div>
                          </div>
                          <div class="col-sm-6">
                                <label for="inputFirstname">E-Mail</label>
                                <input type="text" class="form-control" id="inputEmail" placeholder="">
                            </div>

                           
                          

                            

						</div>
					  
                      </div>
					</div>
                   
                </form>
              <!-- form ends -->
            </div>
        </div>
    </div>