Как изменить цвет фокуса, когда ввод заполнен с обязательным атрибутом javascript/html/css

Question

Я работаю над формой HTML. Я добавил необходимые элементы в некоторые из полей ввода. Поскольку я использую Bootstrap, поля ввода по умолчанию являются синими, когда фокусируются. Я установил необходимые поля ввода в красный цвет с помощью input:required:focus {border: 1px solid red;}. Теперь, когда заполняются необходимые поля ввода, я хочу изменить границу поля ввода на зеленый. Мой вопрос, возможно ли это с помощью CSS и как? Если нет, как я могу достичь этого с помощью Javascript или чего-то еще?

input:required:focus { 
 
    border: 1px solid red; 
 
    outline: none; 
 
} 
 
textarea:required:focus { 
 
    border: 1px solid red; 
 
    outline: none; 
 
} 
 
.form-horizontal { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
}

<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>

Answer 1

Так я узнал, что 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, чтобы проверить его в силе, так что если его заполнили И если его правильно, как номер телефона содержит только цифры. Самое интересное в том, что его единственный HTML5 & CSS3 :)

Answer 2

Использование oninput события на нужное поле, а затем проверить, если его заполненным или нет.

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

\t \t 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>

Answer 3

Когда вы хотите, чтобы включить зеленый? Сразу же вы начинаете вводить текст или когда поле ввода теряет фокус? Позвольте мне предположить, что вы хотите, чтобы это произошло, когда он потерял фокус. Другой вопрос: должен ли он оставаться зеленым, когда он теряет фокус? Я предполагаю, что это произойдет, поскольку мое первое предположение состоит в том, что оно станет зеленым, когда оно потеряет фокус. Поправьте меня, если какой-либо из моих предположений являются неправильными

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>