IDとPWを
入力すると吹き出しが出て来るやつをまとめてみた。
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HOI</title>
</head>
<body>
<div id="idBox">
<label for="">ID:<input type="text" name="id" id="id"></label>
<div class="errorBox">
<div>
<p data-error="0"></p>
</div>
</div>
</div>
<div id="pwBox">
<label for="">PW:<input type="text" name="pw" id="pw"></label>
<div class="errorBox">
<div>
<p data-error="0"></p>
</div>
</div>
</div>
<style>
.errorBox{display: none;}
.formMsg{
position:absolute;
top:2em;
left:1.4em;
z-index:2;
}
.formMsg>div:before {
content: "";
position: absolute;
top: -20px;
left: 10%;
margin-left: -15px;
border: 8px solid transparent;
border-bottom: 12px solid #fc6;
z-index: 2;
}
.formMsg>div>p{
padding:5px;
margin:0;
background-color: #fc6;
border-radius: 5px;
color:#fff;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
function inputInformation(parentsId,inputId,smallLength,msgBoxClass){
$(inputId).on('keyup',function() {
if($(this).val().length < smallLength){
$(parentsId).css('position','relative');
$(parentsId).find('div.errorBox').addClass(msgBoxClass).fadeIn().attr('data-error','0');
$(parentsId).find('p').text('text は'+smallLength+'文字以上で入力してください');
} else {
$(parentsId).css('position','static');
$(parentsId).find('div.errorBox').removeClass(msgBoxClass).css('display','none').attr('data-error','1');
$(parentsId).find('p').text('no');
}
});
$(inputId).focusout(function(e) {
$(parentsId).css('position','static');
$(parentsId).find('div.errorBox').removeClass(msgBoxClass).css('display','none').attr('data-error','1');
});
}
inputInformation('#idBox','#id',5,'formMsg');
inputInformation('#pwBox','#pw',5,'formMsg');
});
</script>
</body>
</html>