Question

嗨，我对validate插件很新。我正在尝试验证三个dropbox，出生日期字段，问题是每个字段更改后弹出的成功消息，无论其他两个字段是否已填写。

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

Answer 1

根据这个答案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>

Answer 2

验证程序的group选项仅用于对邮件进行分组，而不是用于规则集合。使用您现在指定的组，只会为所有三个select对象打印一条“必填”消息。

我的建议是删除group，并使用messages

的.validate()选项覆盖自己所需的消息。

我还会从select中删除CSS类required，因为我很确定你是通过这样做来实现它们的

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

JQuery验证组成功消息

2 个答案: