Блог

Я пытаюсь очистить значок ошибки при нажатии клавиши.

** РЕДАКТИРОВАТЬ — добавление 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() ' amp;#9989;');
    }
    if(status == "error"){
        label.html(label.html() ' amp;#10060;');
    }
  });
}
  

Если статус равен ошибке, покажите значок ошибки.

Итак, теперь я хочу устранить ошибку при нажатии пользователем клавиш. Вот моя попытка:

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

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

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

Очевидно, что я не добился большого успеха в устранении ошибки с помощью вышеупомянутой функции keydown.

Как я могу заставить это работать?

Бизнес с ярлыками, связанный с попыткой сохранить текст внутри, не очень интуитивно понятен, поэтому я добавил span к вашему ярлыку, чтобы вы удаляли и добавляли символы ошибок из span в своих функциях. Кроме того, у вас был некоторый ненужный код, который можно было удалить в обеих функциях. Например, ваши if инструкции, проверяющие статус, были ненужными, поскольку вы уже проверили, было ли значение пустым (где вы установили статус), поэтому вы могли бы переместить этот код в if инструкцию, проверяющую наличие пустых значений.

Мы устанавливаем для каждого соответствующего span идентификатора идентификатор ввода с «Span» id="testSpan" , чтобы он мог быть легко доступен с помощью функций JS. Помните, что функции внутри jQuery this всегда ссылаются на объект, отличный от jQuery, поэтому вы можете использовать для него ванильные методы JS.

Это то, что я мог придумать:

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

  if (this.value != "") { // check if input is empty
    document.getElementById(id   "Span").innerHTML = 'amp;#9989;'; //set ok symbol
    console.log("good");
  } else {
    document.getElementById(id   "Span").innerHTML = 'amp;#10060;'; // 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">