JQuery驗證組成功消息

嗨，我很新的驗證插件。我試圖驗證三個dropboxes，出生日期字段，問題是每個字段發生變化後彈出成功消息，而不管其他兩個字段是否已填寫。JQuery驗證組成功消息

$(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>

來源

2012-03-13 Chris

你想要什麼行爲？只有在用戶點擊提交按鈕時才能進行驗證？或者只顯示三次下拉菜單的驗證消息一次？ – arb 2012-03-13 15:10:14

我希望在輸入完所有三個字段後出現錯誤/成功消息 – Chris 2012-03-13 15:13:06

當用戶輸入數據的時候沒有「好」的方法來輸入數據，除非他們點擊屏幕上的其他東西來提醒你他們完成輸入數據。您如何知道何時輸入了三個字段？如果用戶選擇一個，然後改變他們的想法並將其設置爲空白然後去喝一杯咖啡會怎麼樣？ – arb 2012-03-13 15:19:25

他們需要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>

來源

2012-03-15 10:40:22 Chris

的validater的group選項僅用於分組消息，規則不是集合。對於您現在指定的組，只會爲您的所有三個select對象打印一個「必需」消息。

我的建議是去除group，讓每個選擇與它自己所需要的消息，可以與.validate()

的messages選項覆蓋我也想從選擇刪除的CSS類required，因爲我敢肯定您正在通過基於這個答案做

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

來源

2012-03-13 15:33:33 arb

回答

相關問題