Question

我正在使用带有ASP.NET webforms的Bootstrap 3，我对Bootstrap完全不熟悉。我正在使用的webform使用ASP.net验证控件。我的网络表单有一个标准的布局，有两列，我正在使用＆＃34; form-group＆＃34;用于对标签和输入字段进行分组的类。

现在的问题是，当我放置标签时，输入字段以及它的验证器在Bootstrap＆＃34; form-group＆＃34; class，验证器的text属性中的消息在验证后显示在下一行。我希望它显示在输入字段旁边。有没有其他方法可以做到这一点？

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="txtBox">Address <span class="required">*</span></asp:Label>
    <asp:TextBox id="txtBox" runat="server"  CssClass="form-control"/>
    <asp:RequiredFieldValidator ID="rfvLine1" ValidationGroup="<%# ValidationGroup %>" ControlToValidate="txtBox" runat="server" Display="Dynamic" ErrorMessage="Line 1 is required." Text="*"/>   
</div>

Answer 1

最简单的方法是在单独的列中创建验证。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
        .required {
            color: #e31937;
            font-family: Verdana;
            margin: 0 5px;
        }

        .field-validation-error {
            color: #e31937;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <br />
        <div class="container form-horizontal">
            <div class="form-group">
                <asp:Label runat="server"
                    AssociatedControlID="txtBox"
                    CssClass="col-xs-12 col-sm-4 control-label">
                    Address 
                    <span class="required">*</span>
                </asp:Label>
                <div class="col-xs-12 col-sm-4 ">
                    <asp:TextBox ID="txtBox" runat="server"
                        CssClass="form-control" />
                </div>
                <div class="col-xs-12 col-sm-4 form-control-static">
                    <asp:RequiredFieldValidator ID="rfvLine1"
                        ControlToValidate="txtBox" runat="server"
                        Display="Dynamic"
                        CssClass="field-validation-error"
                        Text="Line 1 is required." />
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12 col-sm-offset-4 col-sm-4 ">
                    <asp:Button runat="server" ID="SubmitButton"
                        Text="Submit" CssClass="btn btn-primary" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Answer 2

执行以下操作：已更新

<div class="container">
    <h4 class="form-signin-heading">Info</h4>
    <div class="form-group">
        <div class="col-xs-7 col-sm-7">
            <asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control username" ID="txtAddress"></asp:TextBox>
        </div>
        <div class="col-xs-7 col-sm-5">
            <span class="help-inline pull-left">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                    ControlToValidate="txtAddress"
                    ErrorMessage="Address is a required field."
                    ForeColor="Red" Display="Dynamic">
                </asp:RequiredFieldValidator>
            </span>
        </div>
    </div>
    <br />
    <br />

    <div class="form-group">
        <div class="col-xs-7 col-sm-7">
            <asp:Button ID="Button1" runat="server" Text="Add" CssClass="btn btn-lg btn-primary btn-block" />
        </div>
    </div>
</div>

我希望，这是你的期望：

顺便说一下，你没有把结束标记放在RequiredFieldValidator中。

Answer 3

#jQuery 用于检查“需要”验证仅提交按钮#

<script type="text/javascript">
 (function () {'use strict';
   window.addEventListener('load', function () {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function (event) {
     if (form.checkValidity() === false) 
       {
          event.preventDefault();
          event.stopPropagation();
       }
     form.classList.add('was-validated');
        }, false);
        }, false);
      })();

##提交按钮 HTML##

 <asp:Button ID="Button1"  runat="server" Text="Submit" class="btn btn-primary"   OnClick="Button1_Click" />

##非提交按钮##

 <asp:Button ID="btnSearch"  runat="server"    class="form-control btn-primary " Width="25%" Text="Find" UseSubmitBehavior="false" OnClick="btnSearch_Click" />

如何在Bootstrap类中包装ASP.net验证控件？

3 个答案: