我有一个input字段和一个button。点击button后，系统会检查input字段是否包含某些数据。如果没有数据，则会突出显示input字段。关注input字段时，将显示错误消息。在keyup事件中，input将不再突出显示，但错误消息仍将保留。
以下是我尝试过的代码：
$(document).ready(function(){
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[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类（经过大量分析后发现），但我不知道为什么会发生这种情况。我做错了什么？
任何帮助都感激不尽。谢谢！
答案 0 :(得分：0)
您可以在按钮点击事件
中添加以下代码 $('[name="tName"]').focus();
并将<span>代码更改为<div>代码，例如代码段。
然后整个代码如下所示，
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
$('[name="tName"]').focus()
}
else
alert('Success');
});
代码段，
$(document).ready(function(){
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
$('[name="tName"]').focus();
}
else
alert('Success');
});
$('[name="tName"]').on('focus', function () {
if ($(this).hasClass('validationInput')) {
$(this).next("span.vspan").css("display", "inline-block").html("Please enter Name");
}
});
$('[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:first {
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 class="caret">
<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">
答案 1 :(得分：0)
我希望这对你有所帮助。我刚刚创建了一个函数来添加和删除css类并显示或不显示消息：
jQuery.fn.myValidate = function(){
if(this.val() == ""){
this.next("span.vspan").html("Please enter Name");
this.next("span.vspan").css("display", "inline-block");
this.addClass('validationInput');
this.closest('div').addClass('wrap');
return false;
}else{
this.next("span.vspan").css("display", "none");
this.closest('div').removeClass("wrap");
this.removeClass('validationInput');
this.next("span.vspan").css("display", "none");
return true;
}
}
$(document).ready(function(){
$('#btnclick').click(function(){
if ($('[name="tName"]').myValidate())
alert('Success');
});
$('[name="tName"]').on('focusout keyup', function (evt) {
$(this).myValidate();
});
});.validationInput,
.validationInput{
background-color: #FFFFE0;
border: 1px solid red;
outline: none;
height: 30px
}
.wrap>span {
display: inline-block;
position: relative;
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">