jQuery表单验证没有导致边框轮廓？

Question

嗨，请看我的代码，因为我不确定我做错了什么。如果输入值不存在，代码应在浏览器中以高亮红色运行，如果存在输入值，则高亮显示绿色。请帮我。我认为这是因为我的input.val（）未定义，但边框不会显示。

＆＃13;

＆＃13;

$(document).ready(function(){



$('.form-control').on('input', function(){
//sets var input as the form-control
var input = $(this);
//assigns is_name as the value of the input
var is_name = input.val();



if(is_name) {



	input.removeClass(".invalid").addClass(".valid");

} else {

	input.removeClass(".valid").addClass(".invalid");
}


});





});

＆＃13;

input.invalid {

    border: 2px solid red;
}

input.valid {

    border: 2px solid green;
}

＆＃13;

<form role="form">
                                       <br />
                                       <span class="error">This field is required</span>
                                     <div class="form-group input-group">
                                            <span class="input-group-addon"><i class="fa fa-tag"  ></i></span>
                                            <input type="text" class="form-control" placeholder="Your Username " />

                                        </div>

                                        <span class="error">This field is required</span>

                                             <div class="form-group input-group">
                                            <span class="input-group-addon"><i class="fa fa-lock"  ></i></span>
                                            <input type="password" class="form-control"  placeholder="Your Password" />
                                        </div>
                                    <div class="form-group">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" /> Remember me
                                            </label>
                                            <span class="pull-right">
                                                   <a href="#" >Forget password ? </a> 
                                            </span>
                                        </div>
                                     
                                     <button class="btn btn-danger" type="submit" id="signin">Sign In</button>
                                    <hr />
                                    Not register ? <a href="register.html" >click here </a> 
                                    </form>
                            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新/修改代码后，它现在正在运行。您可以在 FIDDLE

中找到

JS代码

$('#signin').click(function(){
  //sets var input as the form-control
  var input = $('.form-control');
  //assigns is_name as the value of the input

  var is_name = input.val();        
  if(is_name) {
    input.removeClass("invalid").addClass("valid");
  } else {
    input.removeClass("valid").addClass("invalid");
  }
});

<强> CSS

.invalid {
    border: 2px solid red;
}
.valid {
    border: 2px solid green;
}