Question

I am using the jQuery Validation plugin to validate a signup form for my site. One of the required things a user must do is enter their birthday, they have to be 18 to use the site. I am having the birthday entered through three dropdown menus. I want to validate this entry (to make sure they did it and to make sure they are at least 18, but I am failing to understand the building of custom validators. Here is my code in the form:

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

Anyone ever built a validator like this before using the jQuery Validation plugin?

Answer 1

I was using the jQuery Validation Plugin, and it was working well, so I wanted to stick with it. Basically I had to add a custom validator, and ended up using the date.js library to interpret the date. Like so:

# 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."
        }
    }
});

Not sure if it was the best method, overall, but it worked for me!