jQuery驗證不在多個字段上工作

Question

我有一個搜索結果頁面，其中在頁面頂部有一個搜索字段，另一個在底部。我正在使用jQuery Validate插件（順便說一句，我對jQuery非常陌生），但我不確定我做錯了什麼，因爲它沒有與一個函數一起工作，所以我必須創建兩個。

這裏是我的HTML：

<div class="search-wrapper-large"> 
    <form id="top-search" method="GET" action=""> 
    <input name="topsearch" id="topsearch" class="largesearchfield" type="text"> 
    <button type="submit" title="Search">Search</button> 
    </form> 
</div> 

<p>...search results...</p> 

<div class="search-wrapper-large"> 
    <form id="bottom-search" method="GET" action=""> 
    <input name="bottomsearch" id="bottomsearch" class="largesearchfield" type="text"> 
    <button type="submit" title="Search">Search</button> 
    </form> 
</div> 

而且這裏是我的jQuery：

//Search field validation 
$('#top-search').validate({ 
    invalidHandler: $.watermark.showAll,  
    rules: { 
     topsearch: { required: true, minlength: 3 } 
    }, 
    messages: { 
     topsearch: "Please enter a valid search term (at least 3 characters)." 

    }   
}); 

$('#bottom-search').validate({ 
    invalidHandler: $.watermark.showAll,  
    rules: {   
     bottomsearch: { required: true, minlength: 3 } 
    }, 
    messages: { 
     bottomsearch: "Please enter a valid search term (at least 3 characters)."  
    }    
}); 

1. 有沒有辦法有一個單一的功能都驗證？
2. 我需要將兩個字段包裝在一個單一的< form>元素中嗎？

感謝您對此的任何建議。

Answer 1

您可以使用單個選擇器以逗號分隔每個標識符來針對兩個元素 爲了具有單獨的錯誤輸出標籤，必須爲每個表單調用一次jQuery Validate。

您的初始化方法部分不正確，因爲validate()方法的'messages'選項需要爲每個規則提供消息，而不是將單個消息應用於所有規則。

假設您將字段'topsearch'和'bottomsearch'的名稱更改爲'term'（或任何匹配的名稱），您可以將jQuery Validate的'options'參數存儲在變量中，然後簡單地調用validate()每個表單的'選項'變量一次。下面的代碼應該工作：

var options = { 
    invalidHandler: $.watermark.showAll,  
    rules: {   
     term: { 
      required: true, 
      minlength: 3 
     } 
    }, 
    messages: { 
     term: { 
      required: "Please enter a valid search term (at least 3 characters).", 
      minlength: "Please enter a valid search term (at least 3 characters)." 
     }  
    }    
}; 

$("#top-search").validate(options); 
$("#bottom-search").validate(options); 

這裏有一個的jsfiddle針對上述情況，減去無效的處理程序：http://jsfiddle.net/C6LdW/