2012-03-13 20 views
2

こんにちは、私はプラグインを検証するのがかなり新しいです。私は3つのDropboxes、生年月日フィールドの日付を検証しようとしていますが、問題は、他の2つのフィールドが満たされているかどうかにかかわらず、各フィールドが変更された後に成功メッセージがポップアップすることです。JQuery Validate Groups成功メッセージ

$(document).ready(function() { 
    $("#subscribe").validate({ 
     success: function(em) { 
      em.html("<img src='/Themes/ChefAndBrewer/content/images/tick.png' />").addClass("valid"); 
     }, 
     rules: { 
      day: { 
       required: true 
      }, 
      month: { 
       required: true 
      }, 
      year: { 
       required: true 
      } 
     }, 
     groups: { 
      DateofBirth: "day month year" 
     }, 
     errorPlacement: function(error, element) { 
      if (element.attr("name") == "day" || element.attr("name") == "month" || element.attr("name") == "year") error.insertAfter("#year"); 
      else error.insertAfter(element); 
     } 
    }); 
});​ 

<li class="full-width"> 
<select class="required " id="month" name="month"><option value="">Month...</li> 
<li class="full-width"> 
<select class="required day" id="day" name="day"><option value="">Day...</li> 
<li class="full-width"> 
<select class="required" id="year" name="year"><option value="">Year...</li> 
+0

あなたは何が行動になりますか?ユーザーが[送信]ボタンをクリックしたときだけ検証する?または、3回のドロップダウンで確認メッセージを一度表示するだけですか? – arb

+0

3つのフィールドがすべて入力された後にエラー/成功メッセージが表示されるようにしたい – Chris

+0

ユーザーが画面上の何か他のものをクリックする以外のデータを入力したときに知っている「良い」方法はありませんデータが入力されます。 3つのフィールドがすべて入力されたことをどのように知ることができますか?ユーザーが1つを選択してから、心を変えて空白にしてから、コーヒーを飲む場合はどうなりますか? – arb

答えて

3

を行うことによって、それらが必要となっているValidating broken up date width jQuery Validation plugin

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.validate.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form" name="form"> 
<select name="day" id="day"> 
    <option value="">DD</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<select name="month" id="month"> 
    <option value="">MM</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<select name="year" id="year"> 
    <option value="">YYYY</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<input type="submit" id="sub"/> 
</form> 

<script> 
$(function() { 


    // this function requires month day and year selections 
    $.validator.addMethod("FullDate", function() { 


    //if all values are selected 
    if($("#day").val() != "" && $("#month").val() != "" && $("#year").val() != "") { 
     return true; 
    } else { 
     return false; 
    } 
    }, 'errrr'); 



    $("form").validate({ 

    success: function(em) {  
         em.html("winner").addClass("valid"); 
       }, 

    rules: { 
     day: "FullDate", 
     month: "FullDate", 
     year: "FullDate" 
    }, 
    groups:{ 
     dateofbirth:"day month year" 
    }, 
    errorPlacement:function(error,element){ 
     error.insertAfter('#sub'); 
    } 
    });  
}); 
</script> 
1

validaterのオプションは、ルールのコレクションではなくメッセージのグループ化にのみ使用されます。あなたが今指定したグループでは、あなたのselectオブジェクトの3つ全てに "要請された"メッセージが1つだけ印刷されます。

私の提案はgroupを削除し、それは私はかなり確信しているので、私はまた、選択からCSSクラスrequiredを削除します.validate()

messagesオプションで上書きすることができます必要なメッセージを所有していて、それぞれが選択することですあなたはこの回答に基づいて

rules: { 
    day: { required: true }, 
    month: { required: true }, 
    year: { required: true } 
}