Question

正如标题所示，我已经使用Bootstrap 4构建了一个表单。验证是通过AJAX调用在PHP文件中进行的。除了一个细节外，其他所有东西都工作正常。一旦用户开始在输入字段中输入内容，我就需要将输入类从“无效”更改为“有效”。如何使用Jquery做到这一点？

Answer 1

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

使用“文档”，因为它将随时可用

Answer 2

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

jQuery在输入时更改输入类

2 个答案: