在 DIV 标记中显示 jquery 规则/验证器错误消息答案

【问题标题】：display jquery rules/validator error messages within the DIV tag在 DIV 标记中显示 jquery 规则/验证器错误消息
【发布时间】：2016-12-12 14:24:03
【问题描述】：

我在 DIV 标签中有几个字段。这些字段使用 jquery 规则/验证器进行验证，当发生验证错误时，它会在右侧与 DIV 标记中的输入字段内联显示错误消息。问题是当规则验证器显示相对较长的错误消息时，错误消息移动到下一行，将下一个 div 标签推到底部，它只对右侧的表单输入字段而不是标签执行此操作左边也是一个DIV。因此标签和输入字段未对齐。附加图像的字段错误。

字段伪，

<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Reference Transaction Number:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="refTranNbr" maxlength="20" size="20" /></DIV>
<DIV class="outer-left-bm">Date of Reference Transaction:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="refTranDate" size="10" maxlength="10" /> (mm/dd/yyyy)</DIV>

Jquery 规则/验证器消息

$("#aFormID").validate({
        rules: {            
            refTranNbr: {
                required:  function (element) {
                    return $("#refTranDate").val().length > 0;
                },
                refNumChk: true
            },
            refTranDate: {
                required:  function (element) {                 
                    return $("#refTranNbr").val().length > 0;
                },
                lessThanToday: true
            },
            messages: {         
                    refTranNbr: {
                        required: "Please enter the reference transaction number to complete this transaction.",        
                        refNumChk: "Please enter a valid Reference Transaction Number.  Note: All letters must be in upper case."
                    },          
                    refTranDate: {
                        required : "Please enter a date for the Refering Transaction to complete this transaction.",
                        lessThanToday: "Please enter a reference transaction date less than today's date."
            }
            }

    });

对应的CSS：

DIV.outer-left-bm {
    width:50%;
    float: left;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    float: right;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
}
label.error {
    /* remove the next line when you have trouble in IE6 with labels in list */
    color: red; 
    font-size: 9pt;
    font-style: italic;
    word-break:break-all;
}

【问题讨论】：

您可以硬编码 div 的高度，剪切太长的文本，并在 div 中添加标题以显示消息的全文。这种方式可以接受吗？
向 DIV 添加标题以显示全文？请举例说明一下。
检查这个：
短文本
只有当有错误信息时才会显示这个DIV？那么我应该把它包在错误标签中吗？
没关系，标题是冒泡的。您甚至可以更改您的消息，例如： required: "需要编号",

标签： javascript jquery html css jquery-ui

【解决方案1】：

您可以添加父 div，它将 div 与 .outer-left-bm 和 .outer-right-bm 结合起来，比如“父 div”。

<div class="parent"><DIV class="outer-left-bm">Reference Transaction Number:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="refTranNbr" maxlength="20" size="20" /></DIV></div>

并将以下 css 提供给 parnet div。

.parent{display: inline-block!important}

【讨论】：

不，它没有正确对齐。刚刚复制了您的代码和相应的 CSS。