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/