如何隐藏错误信息时，点击其他输入与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() {
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>

Answer 2

这里有一个实用的解决方案:

$(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 3

你可以试试这样

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