首页 > 解决方案 > Jquery在键入时更改输入类

问题描述

正如标题所示,我使用 Bootstrap 4 构建了一个表单。验证是通过 AJAX 调用在 PHP 文件中进行的。除了一个细节,一切都很好。一旦用户开始在输入字段中输入内容,我需要将输入类从“无效”更改为“有效”。如何使用 Jquery 实现这一点?

标签: javascriptphpjqueryajaxbootstrap-4

解决方案


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

使用“文档”,因为它随时都可以使用


推荐阅读