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

我正在尝试创建一个登录表单。这是一个例子

.日志{ 边缘顶端：40px； 左边距：30px； 右边距：30px； 位置：相对位置； } .log输入[类型=文本]{ 字体大小：13px； 填充：10px 10px 10px 5px； 显示：块； 宽度：100%； 边界：无； 边框底部：1px实心7575； 背景色：fff； } .log输入[类型=密码]{ 字体大小：13px； 填充：5px 10px 5px 5px； 显示：块； 宽度：100%； 边界：无； 边框底部：1px实心7575； 背景色：fff； } .inputlog:focus{outline:none；} .日志标签{ 颜色：999； 字体大小：14px； 字体大小：正常； 位置：绝对位置； 指针事件：无； 左：5px； 顶部：5px； 过渡：0.2s缓解所有； -moz过渡：0.2s缓解所有； -webkit过渡：0.2s轻松全部； } input.inputlog:focus~label，input.used~label{ 顶部：-20px； 颜色：4a89dc； } .bar{ 位置：相对位置； 显示：块； 宽度：100%； } .bar:之前.bar:之后{ 内容：； 高度：2倍； 宽度：0； 底部：1px； 位置：绝对位置； 背景：1ba4df； 过渡：0.2s缓解所有； -moz过渡：0.2s缓解所有； -webkit过渡：0.2s轻松全部； } 酒吧：以前{ 左：50%； } 酒吧：之后{ 右：50%； } .inputlog:focus~.bar:之前，.inputlog:focus~.bar:之后{ 宽度：50%； } 很高兴你回来了！ 电子邮件地址 暗语 登录 新来的

使用这个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;
     }

---

希望，这将有助于获得解决您的问题的想法，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>

})

试试这段代码。

HTML

CSS

这是我的工作

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

---

您可以使用css选择器输入：无效{border:2px solid red；}，但如果在输入中使用required，则id无效。@Cactus，我需要在输入中使用required。您使用javascript吗？jquery？或者你想在普通css中完成它？@Subash，如果是在css中。这对我有好处。因为我需要集成到后端。所以CSS是首选。@Cactus I从输入字段中删除required。但是它仍然不起作用。为了得到答案。它真的很好。但是如果我有更多的字段，我需要为所有字段编写脚本。正当有任何快捷方式吗？使用通用选择器$input。单击函数{}并迭代所有输入，相应地添加/删除类以显示/隐藏红色边框。

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

$( 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");
  });
});

 .makeRed{

      border-bottom: 1px solid red !important;

    }

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