表单验证不适用于jQuery

时间:2016-07-09 14:21:22

标签: javascript jquery html css frontend

我正在尝试jQuery中的表单验证,但它并没有按照我的方式工作。如果输出区域在我聚焦时为空,我希望输入的边框变为红色。

OR

我想添加名为" has-danger"的引导类,如果输入区域为空,则会转动边框和背景为红色。

以下是代码:

<fieldset class="form-group"> <br>
    <label for="name">Name</label> <br><br>
    <input type="name" class="form-control" id="name"> <br>
</fieldset>

jQuery代码1:

$("#name").blur(function() {
    if((this).val() == "" ) {
        $(this).addClass("has-danger");
    }
});

jQuery代码2:

$("#name").blur(function() {
    if((this).val() == "" ) {
        $(this).css("border", "solid 1px red");
    }

1 个答案:

答案 0 :(得分:1)

您错过了$声明中(this)之前的if

注意:我已填写else字段填充时border被删除

&#13;
&#13;
$("#name").blur(function() {
  if ($(this).val() == "") {
    $(this).css("border", "solid 1px red");
  } else {
    $(this).css("border", "");
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="form-group">
  <label for="name">Name</label>
  <input type="name" class="form-control" id="name">
</fieldset>
&#13;
&#13;
&#13;