在DIV标记内显示jquery rules / validator错误消息

时间:2016-12-12 04:32:55

标签: javascript jquery html css jquery-ui

enter image description here我在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;
}

1 个答案:

答案 0 :(得分:0)

你可以添加父div,它将div与.outer-left-bm和.outer-right-bm结合起来,比如&#34; parent div。

NSString *title = @"25th event annual";
NSRange rng = [title rangeOfString:@" "];
NSString *first = [title substringToIndex:rng.location];
NSString *last = [title substringFromIndex:rng.location + 1];
NSString  *lastPart = [last capitalizedString];
NSString *fullString = [NSString stringWithFormat:@"%@ %@",first,lastPart];

并将以下css提供给parnet div。

.parent {display:inline-block!important}