javascript - 控制不同消息的表单错误框宽度

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

提供最小和最大宽度应该会为您修复它，以便在使用较少空间时缩小并在使用更多空间时最大化它，如下所示:

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

   error.css( "left", "180px" );
   error.css( "min-width", "70px" );
   error.css( "max-width", "120px" );

    }