hide popover when textbox is valid
Question
I am using bootstrap popover to display if password is less then 6 character. It works fine but when I click in text it display popover even value of text box is valid. how to hide popover when length of text box is valid
<head>
<title>popover example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password" data-toggle="popover" >
</div>
</div>
Here is my js code I remove div with popover when length is valid . But problem is text box displays popup when I click in text . I want to display popover only when length is less then 6 .
<script>
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").parent().removeClass('popover');
}
});
})();
</script>
Thanks for your help.
3 answers
solution1
2 2015-09-17 05:04:53
您应该使用弹出框的隐藏功能
$("#password1").popover('hide')
solution2
1 ACCPTED 2015-09-17 05:16:26
Use .popover('destroy') instead of .popover('hide') since if you click again on the textbox, it will keep showing you again even if the characters are more than 6.
$(function() { debugger; $('#password1').blur(function() { debugger; if ($('#password1').val().length < 6) { $("#password1").popover({ title: "test", content: "Must be 6 characters long! Must contain a capital letter" }); $("#password1").popover('show'); } else { $("#password1").popover('destroy'); } }); })();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <h1>Bootstrap popover Example</h1> <div> <input type="password" id="password1" placeholder="password"> </div> </div>
solution3
1 2015-09-17 05:59:31
Please check this
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").popover('destroy');
}
});
$('#password1').click(function(){
if($('#password1').val().length>5){
$("#password1").popover('destroy');
}
});
})();
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.