Question

我是bootstrap的新手，我在Model中有一个带有多个验证的字段，（使用Asp.net MVC 4的Bootstrap v3.1.1）

模型验证是：

 [Required(ErrorMessage = "Please Enter Mobile number.")]
    [RegularExpression(@"^[0-9]+$", ErrorMessage = "Only Numbers (0-9) Are Allowed.")]
    [StringLength(4, ErrorMessage = "10 Characters only.")]
     public string mobileNumber { get; set; }

查看代码是：

 <div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary" id="dvID">
            <div class="panel-heading"><strong>Heading Here</strong></div>
            <div class="panel-body">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label>Mobile Number<span class="reruiredField"> * </span></label>
                        @Html.TextBoxFor(x => x.mobileNumber, new { id = "txtdistrictCode", maxlength = "10", @class = "form-control", title = "" })
                        @Html.ValidationMessageFor(x => x.mobileNumber)
                    </div>
                </div>
            </div>
        </div>              
    </div>

生成的HTML：

<div class="form-group">
    <label>Cluster Code<span class="reruiredField"> * </span></label>
    <input type="text" value="" title="" placeholder="Cluster Code" name="ClusterCode" maxlength="9" id="txtClusterCode" data-val-required="Please Enter Cluster Code" data-val-regex-pattern="^[0-9]+$" data-val-regex="Only Numbers (0-9) Are Allowed." data-val-length-max="9" data-val-length="9 Characters allowed." data-val="true" class="form-control">
   <span data-valmsg-replace="true" data-valmsg-for="ClusterCode" class="field-validation-valid"></span>
                    </div>

当我第一次提交按钮验证时正常启动，没有问题

当我没有点击提交按钮时，只需在文本框中输入字符（mobileNumber），验证消息＆＃34;＆＃34;仅允许数字（0-9）。＆＃34;显示（也是正确的）

但是在稍后的情况下，下面的文本框向右侧移动，如屏幕截图所示：

当我点击提交按钮时，它再次到达正确的位置

如何修复多个验证消息的文本框位置？

Bootstrap文本框对齐

0 个答案: