CSS类互相冲突

我有一个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类（经过大量分析后发现的），但我不知道为什么会发生这种情况。我做错了什么？任何帮助将不胜感激。谢谢！

来源

2016-11-24 Senjuti Mahapatra

http://www.bootply.com/2aillUhFwH – Banzay

@Banzay：这是不是期望的输出 –

喜添加下面的代码的按钮单击事件中，

$('[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(){ 
 
    \t  if($('[name="tName"]').val() == "") 
 
     { 
 
    \t  $('[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">

来源

2016-11-24 11:22:51 SilentCoder

不，它不起作用。在'focus'事件中，应该显示错误消息，而不是在'keyup'事件被触发后显示。 –

检查编辑好的代码..你也应该改变''。 – SilentCoder

在我的代码片段中，当它突出显示时，可以看到文本框顶部有一个小三角形，这就是为什么我使用'span'而不是'div'。在你的片段中，三角形缺失。 –

我希望这可以帮助您。我只是做了做一个功能添加和删除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">

来源

2016-11-24 12:38:30

我删除溢出：从CSS隐藏，对我没有意义如果目标是要显示它们。我通过在Jquery中进行焦点调整来改变CSS中的悬停validationInput。 –

它仍然不是所需的输出。 –

CSS类互相冲突

回答

相关问题