jquery錯誤消息放在div（jquery.validate.js）

Question

我有以下腳本，它通過測驗驗證使用jquery.validate.js的頁面，並且完美地工作。我希望有錯誤消息的必要字段被放入一個名爲errormessage的div。 jQuery驗證通常返回一個消息「這個字段是必需的」。

這裏是腳本

<script type="text/javascript"> 
var curPage=1; 
function NextPage() { 
    if (curPage < <?= $num; ?>) { 
     var group = "#page_" + curPage.toString(); 
     var isValid =true; 
     $(group).find(':input').each(function (i, item) { 
       if (!$(item).valid()) 
       isValid = false; 
      }); 

     if(!isValid){ alert("PLEASE MAKE A SELECTION"); } 
     else{ 
      $("#page_" + curPage.toString()).hide(); //hide current page div 
      curPage++; //increment curpage 
      $("#page_" + curPage.toString()).show(); //show new current page div 
     } 
    } 
} 
function PrevPage() { 

    if (curPage > 1) { 
     $("#page_" + curPage.toString()).hide(); //show new current page div 
     curPage--; //increment curpage 
     $("#page_" + curPage.toString()).show(); //hide current page div 
    } 
} 

function InitializePage() { 
    $(".wizardPage").hide(); 
    $("#page_" + curPage.toString()).show(); 


    $("#surveyForm").validate({onsubmit: false}); 

} 




$(document).ready(InitializePage 
    ); 
</script> 

Answer 1

開關這條線 - $("#surveyForm").validate({onsubmit: false});出以下 -

$("#surveyForm").validate({ 
    rules: { 
    xyz: { 
     required: true 
    } 
}, 
messages: { 
    xyz: { 
    required: $('div#errormessage').append("xyz is a required field!"); 
    } 
} 
}, onsubmit: false) 

它會檢查是否xyz充滿與否。如果沒有，它會把xyz is a required field!置於div與iderrormessage。

有關規則的更多詳細信息，請查看this page。向下滾動，直到看到「規則」。

上面的代碼，通過爲每個字段放入規則，將允許您爲每個錯誤消息指定不同的位置。蜘蛛的答案中的博客文章包含了一個更簡單的做事方式，如果您不需要這種可定製性，那麼它更適合。

Answer 2

嘗試建立錯誤容器元素喜歡這裏解釋：

http://mitchlabrador.com/2010/11/05/how-to-change-the-way-jquery-validate-handles-error-messages/