私はinput
フィールドとbutton
を持っています。 button
をクリックすると、input
フィールドにデータがあるかどうかがチェックされます。データがない場合、input
フィールドが強調表示されます。 input
フィールドに注目すると、エラーメッセージが表示されます。 keyup
イベントでは、input
は強調表示されなくなりますが、エラーメッセージはそのまま残ります。CSSクラスが互いに競合しています
$(document).ready(function(){
$('#btnclick').click(function(){
\t if($('[name="tName"]').val() == "")
{
\t $('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
}
else
alert('Success');
});
$('[name="tName"]').on('focus', function() {
if ($(this).hasClass('validationInput')) {
$(this).next("span.vspan").html("Please enter Name");
$(this).next("span.vspan").css("display", "inline-block");
}
});
$('[name="tName"]').on('keyup', function() {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
});
});
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 30px
}
.wrap>span {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span>
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">
が同じのDemoである:以下
は、私がしようとしているコードです。しかし、CSSは何らかの方法で競合しています。エラーメッセージはfocus
イベントに表示されますが、keyup
イベントが発生した後に表示されます。これは、wrap
クラスのために発生します(多くの分析の後に見つけ出されました)が、なぜこれが起こるのかわかりません。私は何を間違えたのですか? ご協力いただければ幸いです。ありがとう!
http://www.bootply.com/2aillUhFwH – Banzay
@Banzay:これではない私はちょうどメッセージcssクラスとディスプレイを追加および削除する機能を作成しましたか希望の出力 –