У меня есть поле 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: Это не желаемый результат –