DIVタグ内のjqueryルール/バリデーターエラーメッセージを表示

Question

DIVタグにはいくつかのフィールドがあります。これらのフィールドは、jquery rules/validatorを使用して検証され、検証エラーが発生した場合、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：あなたは.outerでdivの両方を結合します、親のdivを追加することができます

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; 
} 

Answer 1

-left-bmと.outer-right-bm、たとえば「親部門」

<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 {表示：インラインブロック重要}