jquery - 在“keyup”输入字段颜色应为红色

Question

我在“keyup”上发出错误消息，现在试图将输入“#userName”和“#pwd”边框颜色变为红色

$('input[name=amount]').keyup(function(){
    if($(this).val().length)
    $('.error-msg').show();
    else
    $('.error-msg').hide();
  });

演示

标签： jquery

Answer 1

$('input[name=amount]').keyup(function(){
   
    if($(this).val().length)
   {
     $(this).addClass('inputColor');
    $('.error-msg').show();
   }
    else
    {
    $('.error-msg').hide();
    $(this).removeClass('inputColor');
    }
  });

.login-box {width: 560px; margin: 70px auto 20px; background: #ffffff; padding: 40px 87px 15px; position: relative;}
.login-box .title {width: 167px; height: 16px; background: url(../images/login-title.png) no-repeat 0 0; margin: 0 auto 64px;}
.login-box .form-group {margin-bottom: 17px;}
.login-box form .btn {height: 38px; font-size: 14px; margin: 25px 0 20px;}
.login-box form a {font-family: 'nobelregular'; margin-right: 30px;}
.login-box form .request {display: block; text-transform: uppercase; margin: 20px auto 4px; text-align: center;}
.login-box form .request a {margin: 0;}
.login-box .lead {font-size: 14px; font-family: 'nobelbold'; margin-bottom: 15px;}
.login-meta {width: 560px; margin: 0 auto;}
.login-meta p {line-height: 1.14;}
.error-msg {font-family: 'nobelregular'; position: absolute; top: 70px; left: 0; width: 100%; text-align: center; color: #ff0002; display: none; line-height: 16px; letter-spacing: .5px;}


.inputColor{
border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login-box">
              <div class="title"></div>
              <form action="terms-of-usage-agreement.html">
                <div class="error-msg">
                  Incorrect user ID or password. <br>
                  Please type the correct user ID and password, and try again.
                </div>
                <div class="form-group">
                  <label for="userName">USER NAME</label>
                  <input type="text" class="form-control" id="userName" name="amount">
                </div>
                <div class="form-group">
                  <label for="pwd">PASSWORD</label>
                  <input type="password" class="form-control" id="pwd">
                </div>
                <button type="submit" class="btn btn-block btn-primary">SIGN IN</button>
                <a href="forgot-password.html">Forgot Password</a>
                <a href="reset-password.html">Reset Password</a>
              </form>
            </div>