Jquery Mobile驗證錯誤位置和選擇

Question

我在我的jQuery Mobile項目中添加了對jQuery驗證的表單。它的工作原理是完美的，除了在文本輸入內顯示錯誤而不在其下面。我知道我可以使用errorPlacement在我的輸入下使用div來輸出我的錯誤消息，但這似乎不適用於選擇菜單。

所以我有2個問題：

1. 有什麼我可以做的不同，使錯誤信息顯示在下面的輸入不使用errorPlacement？
2. 如果我必須使用errorPlacement，我如何獲得錯誤消息以顯示選擇菜單？

這裏是我的代碼：

<script> 
    $('#page').bind('pageinit', function(event) { 
     $('#registrationForm').validate({ 
      rules: { 
       firstname: { 
        required: true 
       }, 
       lastname: { 
        required: true 
       }, 
       email: { 
        required: true, 
        email: true, 
        remote: "duplicateCheck.php" 
       }, 
       password: { 
        required: true, 
        minlength: 5 
       }, 
       verify_password: { 
        required: true, 
        minlength: 5, 
        equalTo: "#password" 
       }, 
       handicap: { 
        required: true, 
        maxlength: 2, 
        digits: true 
       }, 
       stopper: { 
        required: true 
       } 
      }, 
      messages: { 
       firstname: { 
        required: "Please enter your first name." 
       }, 
       lastname: { 
        required: "Please enter your last name." 
       }, 
       email: { 
        required: "Please enter your email.", 
        email: "Please enter a valid email.", 
       }, 
       password: { 
        required: "Please enter a password.", 
        minlength: "You password must be at least 5 characters long." 
       }, 
       verify_password: { 
        required: "Please enter a password.", 
        minlength: "You password must be at least 5 characters long.", 
        equalTo: "You passwords did not match." 
       }, 
       handicap: { 
        required: "Please enter your handicap.", 
        maxlength: "Your max handicap can't be higher than 99.", 
        digits: "Please only enter numbers." 
       }, 
       stopper: { 
        required: "Please enter the word above." 
       } 
      }, 
      errorPlacement: function(error, element) { 
       error.appendTo(element.parent().next()); 
      } 
     }); 
    }); 
</script> 

這裏是我的錯誤的CSS：

label.error { 
    color: red; 
    font-size: 16px; 
    font-weight: normal; 
    line-height: 1.4; 
    margin-top: 0.5em; 
    width: 100%; 
    float: none; 
} 

@media screen and (orientation: portrait){ 
    label.error { 
     margin-left: 0; 
     display: block; 
    } 
} 

@media screen and (orientation: landscape){ 
    label.error { 
     display: inline-block; 
     margin-left: 22%; 
    } 
} 

Answer 1

默認情況下，使用jQuery驗證插件使用jQuery移動一起時，錯誤消息顯示低於輸入元素。刪除您的自定義errorPlacement回調函數...

簡單的演示：http://jsfiddle.net/7rXnS/

$(document).on('pageinit', function() { 

    $('#registrationForm').validate({ 
     rules: { 
      firstname: { 
       required: true 
      }, 
      lastname: { 
       required: true 
      } 
     }, 
     messages: { 
      firstname: { 
       required: "Please enter your first name." 
      }, 
      lastname: { 
       required: "Please enter your last name." 
      } 
     } 
    }); 

}); 

然而，jQuery Mobile的包內div元素select元素，因此當插件添加的錯誤label它出現放置在select元素的內部。要解決此問題，請按如下所示使用errorPlacement回調。它檢查元素是否爲select元素，然後在最外層的div包裝中插入錯誤label。如果該元素不是select，則僅使用默認的放置位置。使用

errorPlacement: function (error, element) { 
    if (element.is('select')) { 
     error.insertAfter(element.parents('div.ui-select')); 
    } else { 
     error.insertAfter(element); // default placement 
    } 
} 

DEMO一個select：http://jsfiddle.net/QuwkZ/