表单验证在 jQuery 中不起作用

Question

我正在尝试在 jQuery 中进行表单验证，但它并没有像我那样工作。我希望在聚焦时如果输入区域为空，输入的边框会变成红色。

或

我想添加名为 "has-danger" 的 bootstrap class，如果输入区域为空，它会将边框和背景变成红色。

代码如下：

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

Answer 1

您在 if 语句

中缺少 (this) 之前的 $

注意：我添加了一个 else，当字段被填充时，border 被删除

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

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

表单验证在 jQuery 中不起作用

Form validation not working in jQuery

html

javascript

css

jquery

frontend