jquery - 非表示のコンテンツを使用した Jquery 検証

Question

非表示の div の下のコンテンツは、div がアクティブな場合にのみ検証する必要があります。しかし、私の場合、「象」の場合、エラーメッセージは機能しません。詳細については、コードがhttp://jsfiddle.net/2eRsm/にあります。

<form>
   Choose your animal 
<select id="selectMenu">
    <option></option>
    <option value="monkey">Monkey</option>
    <option value="elephant">Elephant</option>    
</select>
<div class="mon">Monkey:
    <input type="text" class="required" name="mon"/> 
    <p id="error-msg">&nbsp;</p>
    </div>

<div class="ele">Elephant:
    <input type="text" class="required" name="ele"/>
     <p id="error-msg">&nbsp;</p>
    </div>
<button>submit</button>    
</form>
//js
$(document).ready(function () {    
       $("#selectMenu").bind("change", function () {
        if ($(this).val() == "monkey") {
            $(".mon").slideDown();
            $(".ele").slideUp();
        }
        else if($(this).val() =="elephant") {
            $(".ele").slideDown();
            $(".mon").slideUp();
        }
    });
});
$("button").click( function(){
    $("form").submit();   
});
$("form").validate({
    ignore:":hidden",
    rules: {
        name: ["mon", "ele"]
    },
    errorPlacement: function(error, element) {
        error.appendTo( $('#error-msg') )
    },
    invalidHandler: function(form, validator) {
        console.log( "error" );  
    },
    submitHandler: function( form ) {
        console.log( "no error" );
    }
});
//css
input {
    border: 1px solid #666;
    margin: 10px;
    padding: 3px; 
 }
p{
    display:inline;
    color: red;
}
.mon,.ele{
        display: none; 
}*