JQuery изменить входной класс при наборе текста

Question

Как следует из названия, я создал форму с использованием Bootstrap 4. Проверка выполняется в файле PHP с помощью вызова AJAX. Все работает нормально, кроме одной детали. Мне нужно изменить класс ввода с «неверный» на «действительный», как только пользователь начинает вводить что-то в поле ввода. Как я могу добиться этого с помощью Jquery?

Answer 1

Используйте add и remove class в jquery для изменения атрибута класса ввода

$("#check").keypress(function(e){
 $(this).removeClass('invalid')
 $(this).addClass('valid')

})

.invalid
{
border:1px solid red;
}
.valid
{
border:1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="invalid" id="check">

Answer 2

   $(document).on('keyup', '#myInput', function(){
       $myInput = $('#myInput'); //Object DOM Jquery, $.

       $myInput.removeClass('invalid');

       if($myInput.val().length == 0){
          $myInput.removeClass('valid'); 

          if(!$myInput.hasClass('invalid')){
             $myInput.addClass('invalid');
             console.log('invalid!');
          }
       }else{
          $myInput.removeClass('invalid'); 

          if(!$myInput.hasClass('valid')){
              $myInput.addClass('valid');
              console.log('this valid!');     
          } 
       }         
   })


 <style>
 .invalid
   {
     border:1px solid red;
   }
 .valid
   {
     border:1px solid green;
   }
 </style>     

используйте «документ», так как это будет работать в любое время