1

我有一个带有<asp:FileUpLoad>标签的页面，我在其中放置了一个字形图标。当我在未选择文件的情况下单击提交按钮时，bootstrapvalidator 将该字段标记为无效并显示错误消息。问题是字形图标被拉伸以包含<asp:FileUpLoad>字段和引导错误消息。这是单击提交之前表单的样子： 在此处输入图像描述

这就是我点击提交后的样子： 在此处输入图像描述

这是我正在运行的代码：

<head runat="server">
<title></title>
    <script src="../Scripts/modernizr-2.6.2.js"></script>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link id="Link1" rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../Content/bootstrapValidator.min.css" />
<link id="Link3" rel="stylesheet" type="text/css" href="../Content/bootstrap-datepicker.min.css" />
<link id="StyleLink1" rel="stylesheet" type="text/css" href="../Content/Site_VSTT.css"/>


<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../Scripts/respond.js" type="text/javascript"></script>
<script src="../Scripts/moment.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../Scripts/bootstrapValidator.js" type="text/javascript"></script>
</head>
<body>
<form runat="server" id="contactForm" class="form-horizontal" >

<div class="form-group">
    <label class="col-md-3 control-label">File Name</label>
    <div class="col-md-6 input-group">
        <span class="input-group-addon">                            
            <i class="glyphicon glyphicon-file"></i>
        </span>
        <asp:FileUpload ID="uploadfile" name="uploadfile" CssClass="form-control" runat="server" ClientIDMode="Static" placeholder="Enter name of file to upload"/>
    </div>
    <br /><br />
    <div class="col-md-1 col-md-offset-3">
        <asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-default btn-sm">
            <span aria-hidden="true" class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;&nbsp;Cancel
        </asp:LinkButton>

        <button id="btnSubSearch" runat="server" type="submit" class="btn btn-primary btn-sm" >
            <span aria-hidden="true" class="glyphicon glyphicon-arrow-right">
            </span>&nbsp;&nbsp;&nbsp;Validate
        </button>

    </div>
</div>

</form>

<script>

    $(document).ready(function () {
        $('#contactForm')
    .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            uploadfile: {
                validators: {
                    notEmpty: {
                        message: 'The file name is required'
                    }
                }
            }
        }
    })
    })
</script>
</body>
4

0 回答 0