FORM验证：框阴影，输入字段中的边框颜色更改

Question

我有两个字段，一个是必填字段，另一个是可选字段。

1. 到目前为止，在必填字段中，我的左边有红色边框。当我输入文字时，边框变成绿色，这是正确的。

但是，如果用户没有输入值，而是跳到下一个字段，那么我想在所有面上都显示红色边框并显示错误消息。

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>