jQuery表单验证未生成边框轮廓

Question

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

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

});

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

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

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