当输入填充了必需的属性javascript/html/css时，如何更改焦点颜色

所以我发现HTML5包含一个valid和invalid选择器。

  input:required:focus {
  border: 1px solid red;
  outline: none;
  }
 textarea:required:focus {
 border: 1px solid red;
 outline: none;
 }
input:focus:valid {
border: 1px solid green;
outline: none;
}
input:focus:invalid {
border: 1px solid red;
outline: none;
}

input:valid {
border: 1px solid green;
}

您可以将其与required选择器结合使用，以检查其是否有效，因此是否填写了AND 是否正确，例如电话号码仅包含数字。有趣的是，它唯一的HTML5和CSS3:)

您希望它何时变为绿色？您立即开始键入，还是当输入字段失去焦点时？让我假设您希望在失去焦点时发生这种情况。另一个问题是：当它失去焦点时，它应该保持绿色吗？我假设它会，因为我的第一个假设是，只有当它失去焦点时，它才会变成绿色。如果我的任何假设是错误的，请纠正我

Javascript：

$(function(){
        $('input:required,textarea:required').on('blur', function(){
           if($(this).val()!==''){  //assuming the form doesn't have some fields populated by default.
             $(this).addClass('green-border');
           } else {
             $(this).removeClass('green-border');
           }
        });
  });

.green-border {
  border: 1px solid green !important;  
}
input:required:focus {
  border: 1px solid red;
  outline: none;
}
textarea:required:focus {
  border: 1px solid red;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-2 control-label" for="Name">Full name <span class="required">*</span></label>
                    <div class="col-md-10">
                        <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text">
                        <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label" for="email">E-mail <span class="required">*</span></label>
                    <div class="col-md-10">
                        <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email">
                        <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label" for="phone">Phone number</label>
                    <div class="col-md-10">
                        <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text">
                        <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label" for="question">Question <span class="required">*</span></label>
                    <div class="col-md-10">
                        <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea>
                    </div>
                </div>
                <div class="col-md-10 col-md-offset-2">
                <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button>
                </div>
        </form>

在必填字段上使用 oninput 事件，然后验证其是否填充。

oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }"

		  input:required:focus {
      border: 1px solid red;
      outline: none;
     }
     textarea:required:focus {
      border: 1px solid red;
      outline: none;
    }

               <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="Name">Full name <span class="required">*</span></label>
                        <div class="col-md-10">
                            <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text" oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }">
                            <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="email">E-mail <span class="required">*</span></label>
                        <div class="col-md-10">
                            <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email" oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }">
                            <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="phone">Phone number</label>
                        <div class="col-md-10">
                            <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text">
                            <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="question">Question <span class="required">*</span></label>
                        <div class="col-md-10">
                            <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question" oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }"></textarea>
                        </div>
                    </div>
                    <div class="col-md-10 col-md-offset-2">
                    <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button>
                    </div>
            </form>