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">
	<img src="assets/img/icon/padlock.png">
		</div>
		  <div class="login-msg">
			  <h4>Great to have you back!</h4>
		</div>
		<form >
			<div class="log">      
				<input class="inputlog" type="text">
				<span class="highlight"></span>
				<span class="bar"></span>
				<label>Email Address</label>
		    </div>

			<div class="log">      
				<input class="inputlog" type="password">
		        <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 class="login-btn">
					<h4>LOGIN</h4>
				</div>
			</div>

<div class="new-login">
<p>New here?<a href="register.html"> Click here to Register</a></p>
			</div>
	</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

希望，这将有助于解决您的问题，使用已编辑的登录按钮的HTML

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

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");

    }

}）;

Answer 4

这对我有用

var Error_Flag = false;
$('.Signin_Form').find('input').each(function(){
    if($(this).attr('required')){
        if($(this).val() == ''){
            $(this).css({'border': '1px solid #FFB74D'});
            Error_Flag = true;
        }
        else
        {
            $(this).css({'border':''});
        }
    }
});

$('.Signin_Form input').on('keyup',function(event) {
    if($(this).val() != ''){
        $(this).css({'border':''});
    }
});


if(Error_Flag){
    return;
}

如何在字段为空时更改边框颜色

4 个答案: