append span element and fadeOut jQuery
Question
I'm developing a validation function for an input field that only takes in digits. If it's not a number, it is aupposed to append a span with a message: "Only digits" and then fadeout. The problem is that both the input field and the span fades away.
How do I make it ao that only the message fades out?
</head>
<body id="test">
Number : <input type="text" title="numInput" name="quantity" id="quantity" maxlength="8" />
</body>
</html>
jQuery
$(document).ready(function () {
$('input[title="numInput"]').keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
var errmsg = "<span>Only digits</span>";
$("#test").append(errmsg).show().fadeOut("slow");
return false;
}
});
});
3 answers
solution1
1 ACCPTED 2017-02-23 13:22:30
$(document).ready(function() { $('input[title="numInput"]').keypress(function(e) { //if the letter is not digit then display error and don't type anything if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { $(".error").fadeIn("slow").fadeOut("slow"); return false; } }); });
.error{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body id="test"> Number : <input type="text" title="numInput" name="quantity" id="quantity" maxlength="8" /> <span class="error">Only digits</span> </body>
- Add the error message span in html
- Add class to span then hide it in CSS
- Then do fadein and fadeout
$(document).ready(function() { $('input[title="numInput"]').keypress(function(e) { //if the letter is not digit then display error and don't type anything if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { var errmsg = "<span id='spantoremove'>Only digits</span>"; var thiscontext = $(this); $('#test').append(errmsg); setTimeout(function() { $("#spantoremove").remove() }, 3000); return false; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body id="test"> Number : <input type="text" title="numInput" name="quantity" id="quantity" maxlength="8" /> </body>
- Try using settimeout.
- After appending settimeout example 3 sec then remove
solution2
0 2017-02-23 13:20:10
Please try to use fade out separately by giving an id to the span tag because currently, it applies to the element with id test. You can use input type number too for numeric values. here is the running script.
var errmsg = "<span>Only digits</span>";
$("#test").append(errmsg);
document.getElementsByTagName("span")[0].setAttribute("id", "errorMsg");
setTimeout(function(){ $("#errorMsg").fadeOut("slow"); }, 3000);
solution3
0 2017-02-23 13:37:17
try this :
$(document).ready(function () {
$('input[title="numInput"]').keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
var errmsg = "<span>Only digits</span>";
$("#test").append(errmsg);
$(errmsg).fadeOut("slow");
return false;
}
});
});
<div>
<div id="test">
Number : <input type="text" title="numInput" name="quantity" id="quantity" maxlength="8" />
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.