Question

我有一个带有Jquery验证的表单：

 rules:{
     id: {
         required : true,
         minlength: 4,
         maxlength: 6,
     },

....

messages:{
    id: {
        required : "ID is Required",
        minlength: "ID must have 4-6 Digits",
        maxlength: "ID must have 4-6 Digits",
    },

此验证有2条错误消息。

错误消息单独显示，在输入中的气球中显示：

errorPlacement: function(error, element) {

     if(element.attr("name") == "id"){

         error.css( "left", "180px" );
         error.css( "width", "120px" );
     }

在这里，我可以为每个错误显示一个带有自定义宽度（和左侧位置）的错误框。

但是，许多字段都有2个或更多错误消息，大小不同。

今天 - 我可以在框中添加最大消息 - 短消息使用更大的同一个框。

这样的事情：

[ID IS REQUIRED................]

[ID MUST HAVE 4-6 DIGITS]

我该怎么做：

[ID IS REQUIRED]

[ID MUST HAVE 4-6 DIGITS]

根据消息需要调整框宽度。

Answer 1

给出最小和最大宽度应该为你修复它，以便在使用更少空间时缩小，并在使用更多空间时最大化，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/lblName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textSize="25sp"
            android:textStyle="bold"
            android:text="Test"
            android:layout_gravity="center"/>

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:textSize="15sp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="10dp"
            android:id="@+id/txtName"/>
    </LinearLayout>

</LinearLayout>

Answer 2

我知道了！

使用Khris的想法并添加：

white-space: nowrap;

如果没有这个“空格”，错误框会更喜欢“包装”消息以生成“最大宽度”选项。

在CSS上执行此操作：

.has-error .help-block {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    color: #da0c0c;
    position: absolute;
    min-width: 100px;
    max-width: 500px;
    white-space: nowrap;
}

对我来说很好！

让克里斯知道这个好主意！

控制表单错误框宽度用于不同的消息

2 个答案: