Проверка разбитой даты ширины jQuery Плагин валидации

Question

Плагин jQuery Validation используется для проверки всех данных формы: http://docs.jquery.com/Plugins/Validation

3 поля выбора даты рождения: день, месяц, год.

Во-первых: как я могу убедиться, что пользователь выбирает все 3 поля, а значок «неверный» отображается только в том случае, если одно из всех трех полей не выбрано. Например, теперь у меня есть эти 3 поля выбора, но когда я выбираю первым и все в порядке, тогда плагин отображает значок «ОК», даже если два других поля выбора (месяц, год) не выбраны.

Второе: как я могу проверить эти 3 поля выбора и убедиться, что человек, дата рождения которого выбрана в этих 3 полях выбора, старше 18 лет?

<select name="DOBd" id="DOBd">
    <option value="">DD</option>
    // day options
</select>
<select name="DOBm" id="DOBm">
    <option value="">MM</option>
    // month options
</select>
<select name="DOBy" id="DOBy">
    <option value="">YYYY</option>
    // year options
</select>

Также я установил, что значок «ошибка» отображается не после каждого из них, а после всех них:

groups:{
    date_of_birth:"DOBd DOBm DOBy"
},
errorPlacement:function(error,element){
    if (element.attr("name") == "DOBd" || element.attr("name") == "DOBm" || element.attr("name") == "DOBy")
        error.appendTo(element.parent("td").next("td"));
    else
        error.appendTo(element.parent("td").next("td"));
},

Answer 1

Вы можете добавить пользовательские методы, используя $.validator.addMethod

Добавьте два метода: один для проверки всех 3 вариантов (FullDate) и один для проверки возраста (Age). Поскольку 3 элемента сгруппированы, я просто поместил один метод на один селектор, а другой - на другой селектор.

Кроме того, ваша errorPlacement функция имеет if/else, которая делает то же самое, что не является необходимым.

$(function() {
  // this function requires month day and year selections
  $.validator.addMethod("FullDate", function() {
    //if all values are selected
    if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") {
      return true;
    } else {
      return false;
    }
  }, '<img src="/path/to/image.png" alt="Please select a day, month, and year" title="Please select a day, month, and year" />');

  // this function checks the selected date, returning true if older than 18 years
  $.validator.addMethod("Age", function() {
    //only compare date if all items have a value
    if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") {
      //get selected date
      var DOB = new Date($("#DOBy").val(), $("#DOBm").val(), $("#DOBd").val());
      var eday = new Date(); //get today
      eday.setFullYear(eday.getFullYear() - 18); //set to eighteen years ago
      //if older than 18
      if(DOB < eday) {
        return true;
      } else {
        return false;
      }
    }
    return true;
  }, '<img src="/path/to/image.png" alt="Must be 18" title="Must be 18" />');

  $("form").validate({
    rules: {
      DOBd: "FullDate",
      DOBm: "Age"
    },
    groups:{
      date_of_birth:"DOBd DOBm DOBy"
    },
    errorPlacement:function(error,element){
      error.appendTo(element.parent("td").next("td"));
    }
  });    
});