样式.field-validation-error作为长错误消息的标注

时间:2016-03-28 08:30:56

标签: jquery css asp.net-mvc twitter-bootstrap jquery-ui

我正在尝试设置字段验证错误类,因此它的工作方式类似于标注气泡。当错误消息很小时它工作正常,但当错误消息变长时它会丢失它的样式。我试图在示例代码中解释一下。

任何帮助将不胜感激。

.field-validation-error {
    background: #e99595 url("images/popoutcross.png") 5px center no-repeat;
    position: relative;
    padding: 8px 8px 8px 35px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #CCC;
    min-height: 20px;
    margin-top: -15px;
    margin-bottom: 15px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    display: block;
    max-width: 325px; /* optionally, set a max-width */
    color: #b94a48;
}

    .field-validation-error::before {
        content: "";
        width: 0px;
        height: 0px;
        border: 0.8em solid transparent;
        position: absolute;
        left: 5%;
        bottom: 35px;
        border-bottom: 10px solid #e99595;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group" style="margin-bottom: 25px;">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input name="UserName" class="form-control input-validation-error" id="login-username" type="text" placeholder="User Name" value="" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" data-val-length="The field User Name must be a string with a maximum length of 20."
  data-val="true" data-placement="top">

 
</div>

 <span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName"><span for="login-username">The User Name field is required.</span></span>

<div class="input-group" style="margin-bottom: 25px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="UserName1" class="form-control input-validation-error" id="login-username1" type="text" placeholder="User Name1" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20"
data-val-length="The field User Name must be a string with a maximum length of 20." data-val="true" data-placement="top">

</div>
<span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName1"><span for="login-username1">The field User Name must be a string with a maximum length of 20.</span></span>

1 个答案:

答案 0 :(得分:1)

看看这是否可以解决您的问题:

<?php
     $wpdb->insert('ps_custom_cat', array('name' => $_GET['name']));
?>

此处的完整代码:http://codepen.io/anon/pen/BKZqYr

最好是在<div class="input-group" style="margin-bottom: 25px;"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="UserName" class="form-control input-validation-error" id="login-username" type="text" placeholder="User Name" value="" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" data-val-length="The field User Name must be a string with a maximum length of 20." data-val="true" data-placement="top"> <span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName"><span for="login-username">The User Name field is required.</span></span> </div> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="UserName1" class="form-control input-validation-error" id="login-username1" type="text" placeholder="User Name1" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" data-val-length="The field User Name must be a string with a maximum length of 20." data-val="true" data-placement="top"> <span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName"><span for="login-username">The field User Name must be a string with a maximum length of 20.</span></span> </div> 内注入<span>。否则,计算容器的高度变得越来越复杂,并将其与顶部的确切数字绝对定位。