尝试使用JQuery清除错误提示

Question

我正在尝试清除keydown上的错误图标。

**编辑-添加HTML **

<input class="validate" type="text" data-type="string" id="address" />
<input class="validate" type="text" data-type="number" id="zip" />

**结束编辑-不确定这是否有助于揭示一些问题**

目前，使用此函数显示错误：

function validateFields(){

$(".validate").blur(function(){
    var status = "";
    var label = this.id;
    var value = this.value;

    if(value != ""){
        status = "good";
        console.log("status " + status);
    }
    else{
        status = "error";
        console.log("status " + status);
    }

    if(status == "good"){
        label.html(label.html()+' ✅');
    }
    if(status == "error"){
        label.html(label.html()+' ❌');
    }
  });
}

如果status等于Error，则显示error图标。

所以现在，我想在用户按下键盘时清除这个错误。这是我的尝试：

function clearError(){
$(".validate").keydown(function(){

    var datatype = $(this).data("type");
    var label = this.id;

    label.html(label.html()+' ');
  });
}

显然，使用上面的keydown函数清除错误并不是很成功。

我怎么才能让它工作呢？

Answer 1

试图保留文本的标签业务并不是很直观，所以我给您的标签添加了span，以便您在函数中从span中删除和添加错误符号。此外，您有一些不必要的代码，可以在这两个函数中删除。例如，您的if语句检查状态是不必要的，因为您已经检查值是否为空(设置状态的位置)，因此可以将该代码移到检查空值的if语句中。

我们使用"Span“id="testSpan"将每个对应的span的id设置为输入的id，这样JS函数就可以很容易地访问它。记住，在jQuery函数中，this总是引用非jQuery对象，所以你可以在它上面使用JS vanilla方法。

这是我能想到的：

​

$(".validate").blur(function () {
  var id = this.id; // get id

  if (this.value != "") { // check if input is empty
    document.getElementById(id + "Span").innerHTML = '✅'; //set ok symbol
    console.log("good");
  } else {
    document.getElementById(id + "Span").innerHTML = '❌'; // set error symbol
    console.log("error empty text");
  }
});

$(".validate").keydown(function () {
  // if value is empty set error symbol, otherwise nothing (keep ok symbol)
  if (this.value === "") document.getElementById(this.id + "Span").textContent = "";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="test">test<span id="testSpan"></span></label>
<input id="test" class="validate">

<label for="test2">test<span id="test2Span"></span></label>
<input id="test2" class="validate">

​