フィールドが空のときに境界線の色を変更する方法

Question

ログインフォームを作成しようとしています。フィールド上のクリック、境界線の下の色が青に変更された場合、ここでの例では、今ここに...

.log { 
 
    margin-top: 40px; 
 
    margin-left: 30px; 
 
    margin-right: 30px; 
 
    position: relative; 
 
} 
 

 
.log input[type="text"] { 
 
    font-size:13px; 
 
    padding:10px 10px 10px 5px; 
 
    display:block; 
 
    width:100%; 
 
    border:none; 
 
    border-bottom:1px solid #757575; 
 
    background-color: #fff; 
 
} 
 

 
.log input[type="password"] { 
 
    font-size:13px; 
 
    padding: 5px 10px 5px 5px; 
 
    display:block; 
 
    width:100%; 
 
    border:none; 
 
    border-bottom:1px solid #757575; 
 
    background-color: #fff; 
 
} 
 

 
.inputlog:focus { outline:none;} 
 

 
.log label { 
 
    color:#999; 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    position:absolute; 
 
    pointer-events:none; 
 
    left: 5px; 
 
    top: 5px; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 

 
input.inputlog:focus ~ label, input.used ~ label { 
 
top: -20px; 
 
    color: #4a89dc; 
 
    } 
 

 
.bar { 
 
    position:relative; 
 
    display:block; 
 
    width:100%; 
 
} 
 

 
.bar:before, .bar:after { 
 
    content:''; 
 
    height:2px; 
 
    width: 0; 
 
    bottom:1px; 
 
    position:absolute; 
 
    background: #1ba4df; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 

 
.bar:before { 
 
    left:50%; 
 
} 
 
.bar:after { 
 
    right:50%; 
 
} 
 

 
.inputlog:focus ~ .bar:before, .inputlog:focus ~ .bar:after { 
 
    width:50%; 
 
}

<div class="form-desc"> 
 
    <div class="lock-icon"> 
 
\t <img src="assets/img/icon/padlock.png"> 
 
\t \t </div> 
 
\t \t <div class="login-msg"> 
 
\t \t \t <h4>Great to have you back!</h4> 
 
\t \t </div> 
 
\t \t <form > 
 
\t \t \t <div class="log">  
 
\t \t \t \t <input class="inputlog" type="text"> 
 
\t \t \t \t <span class="highlight"></span> 
 
\t \t \t \t <span class="bar"></span> 
 
\t \t \t \t <label>Email Address</label> 
 
\t \t  </div> 
 

 
\t \t \t <div class="log">  
 
\t \t \t \t <input class="inputlog" type="password"> 
 
\t \t   <span class="highlight"></span> 
 
\t \t   <span class="bar"></span> 
 
\t \t \t  <label>Password</label> 
 
\t \t \t </div> 
 

 
\t \t  <div class="forgot-pswd"> 
 
\t \t \t <a href="#">Forgot Password?</a> 
 
\t \t \t \t </div> 
 

 
\t \t \t <div class="login-algn"> 
 
\t \t \t \t <div class="login-btn"> 
 
\t \t \t \t \t <h4>LOGIN</h4> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
<div class="new-login"> 
 
<p>New here?<a href="register.html"> Click here to Register</a></p> 
 
\t \t \t </div> 
 
\t </div>

です。

フィールドが空で、ログインボタンをクリックした場合、ボーダーの下の色を青から赤に変更するにはどうすればよいですか？それは、これらのような必須フィールドであることを示す必要があります。

境界線の色を赤に変更する必要があります。

ありがとうございます。

Answer 1

このコードを試してください。 Plunker LINK

HTML

<div class="log"> 
      <input id="user" class="inputlog" type="text" required="" /> 
      <span class="highlight"></span> 
      <span class="bar"></span> 
      <label>Email Address</label> 
     </div> 
     <div class="log"> 
      <input id="pwd" class="inputlog" type="password" required="" /> 
      <span class="highlight"></span> 
      <span class="bar"></span> 
      <label>Password</label> 
     </div> 

JS

$(document).ready(function() { 

    $(".login-btn").click(function(){ 
    var user = $("#user").val(); 
    var pwd = $("#pwd").val(); 

    if(!user){ 

     $("#user").addClass("makeRed"); 
    } 
     else 
     { 
     $("#user").removeClass("makeRed"); 
     } 
    if(!pwd){ 

     $("#pwd").addClass("makeRed"); 
    } 
     else 
     { 
     $("#pwd").removeClass("makeRed"); 
     }  
    }); 
    $("#user").click(function(){ 
     $("#user").removeClass("makeRed"); 
    }); 
    $("#pwd").click(function(){ 
    $("#pwd").removeClass("makeRed"); 
    }); 
}); 

CSS

.makeRed{ 

     border-bottom: 1px solid red !important; 

    } 

Answer 2

・ホープ、このjQueryの

$('form').find('input').each(function(){ 
    if($(this).prop('required')){ 
     $(this).parent().find('.bar')addClass('red-bar'); 
    } else { 
     $(this).parent().find('.bar')removeClass('red-bar'); 
    } 
}); 

とCSS

.bar.red-bar:before, .bar.red-bar:after { 
     background: red; 
    } 

Answer 3

を使用して、これはあなたの問題を解決するためのアイデアを得るのに役立ちます、編集後のログインボタン

<div class="form-desc"> 
    <div class="lock-icon"> 
    <img src=""> 
     </div> 
      <div class="login-msg"> 
       <h4>Great to have you back!</h4> 
     </div> 
     <form > 
      <div class="log">  
       <input class="inputlog" type="text" required> 
       <span class="highlight"></span> 
       <span class="bar"></span> 
       <label>Email Address</label> 
      </div> 
    <div class="log">  
       <input class="inputlog" type="password" required> 
       <span class="highlight"></span> 
       <span class="bar"></span> 
       <label>Password</label> 
      </div> 

      <div class="forgot-pswd"> 
      <a href="#">Forgot Password?</a> 
       </div> 

      <div class="login-algn"> 
       <div> 
       <input class="login-btn" type="submit" value="login"> 
       </div> 
      </div> 

<div class="new-login"> 
<p>New here?<a href="register.html"> Click here to Register</a></p> 
      </div> 

とHTML jQueryの

$(".login-btn").on("click",function(){ 
    var text = $("input[type='text']"); 
    var pass = $("input[type='password']"); 

    if(!text.val()){ 
    text.css("border","2px solid red"); 

    } 

    if(!pass.val()){ 
     pass.css("border","2px solid red"); 

    } 

}）;