入力フォームにフィールドを出力する方法が必要です

Question

jQueryを使用してボックスの色が赤色になっている入力ボックスまたはプレースホルダ内に「フィールドが必要です」またはminlengthのエラーメッセージを出力します。私は自分のフォームと検証を行っていますが、メッセージが醜く見え、フォームの中に何らかの混乱を招くボックスの下に出てきます。

私のコード：

<form action="" method="POST" id="login_form"> 
    <div class="form-group has-feedback"> 
    <input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span> 

    </div> 
    <div class="form-group has-feedback"> 
    <input type="password" name="password" id= "password" class="form-control" placeholder="Password"> 

    <span class="glyphicon glyphicon-lock form-control-feedback"></span> 
    </div> 
    <div class="row"> 
    <div class="col-xs-8"> 

    </div> 
    <!-- /.col --> 
    <div class="col-xs-4"> 
     <button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button> 
    </div> 
    <!-- /.col --> 
    </div> 
</form> 

のjQueryコード：あなたは.errorクラスのためのあなたのCSSを定義することができ

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('form').validate({ 
      rules: { 
       username: { 
        required: true, 
        minlength: 5 
       }, 
       password: { 
        required: true, 
        minlength: 5 
       }, 

      }, 
        }); 
    }); 
</script> 

Answer 1

が、その後input.error用のためonkeyupに検出除去する属性を "必要" と間違って何

$(document).ready(function() { 
 
      $('form').validate({ 
 
       rules: { 
 
        username: { 
 
         required: true, 
 
         minlength: 5 
 
        }, 
 
        password: { 
 
         required: true, 
 
         minlength: 5 
 
        }, 
 
    
 
       }, 
 
         }); 
 
         $(document).on("keyup", "input.error", function(){ 
 
    $("label[for='"+$(this).attr('id')+"']").hide(); 
 
}); 
 
     });

.form-group { 
 
position:relative; 
 
} 
 
label.error{ 
 
position:absolute; 
 
top:0px; 
 
left:0px; 
 
background-color:#fff; 
 
color:red; 
 
} 
 
input.error{ 
 
border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> 
 
<form action="" method="POST" id="login_form"> 
 
     <div class="form-group has-feedback"> 
 
     <input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span> 
 

 
     </div> 
 
     <div class="form-group has-feedback"> 
 
     <input type="password" name="password" id= "password" class="form-control" placeholder="Password"> 
 

 
     <span class="glyphicon glyphicon-lock form-control-feedback"></span> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-8"> 
 

 
     </div> 
 
     <!-- /.col --> 
 
     <div class="col-xs-4"> 
 
      <button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button> 
 
     </div> 
 
     <!-- /.col --> 
 
     </div> 
 
    </form>