Question

我有一个带有<asp:FileUpLoad>标记的页面，我将其放入一个glyphicon。当我单击提交按钮而不选择文件时，bootstrapvalidator将该字段标记为无效并显示错误消息。问题是glyphicon图标被拉伸以包含<asp:FileUpLoad>字段和引导错误消息。这是在单击Submit之前表单的样子：

这就是我点击提交后的样子：

以下是我正在运行的代码：

<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>

当表单无效时，带有glyphicon的Bootstrapvalidator会扩展glyphicon

0 个答案: