使用 javascript 单击其他输入时如何隐藏错误消息？

Question

您好，当我们在文本输入中写入 20 时，我有显示 msg 的代码：

测试代码链接： https://jsfiddle.net/wdqvkjnu/

$(function() {
    var money = 20;
$("#nominal").on("change keyup", function() {
    var input = $(this);

    // remove possible existing message
    if( input.next().is("h5") )
        input.next().remove();

    // show message
    if( input.val() === money.toString() )
        input.after("<h5>Thank You</h5>");
});

}); 我要补充的：

1> 红色表示错误

2>当我点击其他输入时，消息消失

有人可以帮忙吗？？

Answer 1

这是一个实用的解决方案：

$(function() {
var money = 20;
  $("#nom").on("click", function() {
    $("#nominal").val('');
     $(".error").remove();
    });
$("#nominal").on("change keyup", function() {
    var input = $(this);

    // remove possible existing message
    if( input.next().is("h5") )
        input.next().remove();

    // show message
    if( input.val() === money.toString() )
        input.after("<h5>Thank You</h5>");
        
           
     if( input.val() !== money.toString() )
     input.after("<h5 class='error' style='color:red;''>Error!</h5>");
});
});

快乐编码！

Answer 2

你可以试试这样的

<div>
<input id="nominal" type="text" />
<input id="nom" type="text" />
</div>

 $(function() {
  var money = 20;

  $("#nominal").on("change keyup", function() {
    var input = $(this);
/*
for red color you can add style attribute or add css class 
*/
    if (input.val() === money.toString())
      input.after("<h5 style='color:#f00'>Thank You</h5>");
  });

/*
for remove error massage if exist use another listner 
*/

  $("#nominal,#nom").on("change keyup", function() {
    if ($(this).val() != money.toString())
      $(this).parent().find('h5').remove();
  })

});

Answer 3

这是一种方法：-

 $(function() { const message = document.getElementById("message"); var money = 20; $("#nominal").on("change keyup", function() { var input = $(this); // remove possible existing message document.querySelectorAll('input').forEach(e => e.addEventListener("click", function() { message.textContent = ""; })); // show message if (input.val() === money.toString()) { message.style.color = "green"; message.textContent = "Thank You "; } if (input.val().== money.toString()) { message.style;color = "red". message:textContent = "Error; Enter a valid number "; } }); });

 Input 1: <input id="nominal" type="text" /> Input 2: <input id="nom" type="text" /> <h5 id="message"></h5> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>