Проверка даты выпадающего Jquery

Question

Я использую плагин jQuery Validation для проверки формы регистрации на моем сайте. Пользователь должен ввести свой день рождения, ему должно быть 18 лет, чтобы пользоваться сайтом. У меня день рождения, введенный через три выпадающих меню. Я хочу проверить эту запись (чтобы убедиться, что они это сделали, и чтобы им было не менее 18 лет, но я не понимаю, как создаются пользовательские валидаторы. Вот мой код в форме:

<p>
            <label for="user_birthday">Birthday</label>
            <br>
            <select id="user_birthday_2i" name="user[birthday(2i)]">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            etc....
            </select>
            <select id="user_birthday_3i" name="user[birthday(3i)]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            etc...
            </select>
            <select id="user_birthday_1i" name="user[birthday(1i)]">
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            etc...
            </select>
          </p>

Кто-нибудь когда-либо создавал такой валидатор до использования плагина jQuery Validation?

Answer 1

Я использовал jQuery Validation Plugin , и он работал хорошо, поэтому я хотел придерживаться его.По сути, мне пришлось добавить пользовательский валидатор, и в итоге я использовал библиотеку date.js для интерпретации даты.Вот так:

# formats the date into a hidden field that can be validated when the dropdowns are changed.
$('#user_birthday_3i,#user_birthday_2i,#user_birthday_1i').change(function() {  
      $('#user_birthday').val($('#user_birthday_3i').val()+'/'+ $('#user_birthday_2i').val()+'/'+ $('#user_birthday_1i').val());
    });


# uses date.js to interpret the date and do a little math
jQuery.validator.addMethod("ofAge", function(value, element) { 
        return Date.parse($("#user_birthday").val()) < (18).years().ago();
    }, "You must be 18 years old to join.");


# validated the form using the jquery validation plugin
$("#new_user_signup").validate({
    rules: {
        "user[birthday]": {
            required: true,
            date: true,
            ofAge: true
        }
    },
    messages: {
        "user[birthday]": {
            required: "Please enter your birthday.",
            date: "Please enter your birthday."
        }
    }
});

Не уверен, что это был лучший метод, в целом, но он работал для меня!

Answer 2

Люди обычно знают свой день рождения довольно хорошо, поэтому я бы предпочел, чтобы они его напечатали. Подтвердить дату тоже довольно просто.

Birthday:<input name="birthday" onblur="validate18(this);">
<br>
<span class="hint">day/month/year</span>
<br>
<span id="birthdayError" class="errorMessage"></span>

<script>

function validate18(el) {
    var bits = typeof el.value == 'string'? el.value.split('/') : [];
    var d = new Date(bits[2], bits[1]-1, bits[0]);
    var err = document.getElementById(el.name + 'Error');

    // Check date was valid
    if (d && d.getFullYear() == bits[2] && d.getMonth() == bits[1]-1) {

        // Check is 18 years ago or more
        var testDate = new Date();
        var testDate = testDate.setYear(testDate.getFullYear() - 18);
        err.innerHTML = (testDate - d < 0)? 'Sorry, you aren\'t 18 yet' : '';
    } else {
      err.innerHTML = 'Please enter a valid date';
    }
}

</script>