How do validate one datetime is newer than another datetime clientside and post warning if failed

I have 2 input fields that has a datepicker each, none of them are required, but if they are entered then field 1 must be lower (Newer) than the other.

So I found http://webcloud.se/log/Form-validation-with-jQuery-from-scratch/ but I cant figure out how to make this work, I created this Jquery

        $('#resource_form').validate({
            rules: 
                {

            DateIn: 
                {
            check: function () {
                if($('#resource_datein').val() == '' || $('#resource_dateout').val() == '') {
                    return true;
                }
                else if($('#resource_datein').val() < $('#resource_dateout').val()) {
                    return true;
                }
                else {
                    return false;
                }
            }
    },
        messages: 
            {
                DateIn:{
                    check: "Date out must be earlier than returned date"
            }

        }
    }

});

This is then supp开发者_高级运维osed to validate this html

                <div id="ExpectedReturn">
                    <div class="editor-label">
                        @Html.LabelFor(m => m.Resource.ExpectedReturn)
                    </div>
                    <span class="editor-field">
                        @Html.TextBoxFor(m => m.ExpectedReturn.Date, new { @Id = "resource_datereturn", @class = "datepicker", maxlength = "10" })
                        @Html.TextBoxFor(m => m.ExpectedReturn.Hour, new { @Id = "resource_hour", maxlength = "2" })
                        :
                        @Html.TextBoxFor(m => m.ExpectedReturn.Minute, new { @Id = "resource_minute", maxlength = "2" })
                    </span>
                    <span>
                        @Html.ValidationMessageFor(m => m.ExpectedReturn.Date)
                        @Html.ValidationMessageFor(m => m.ExpectedReturn.Hour)
                        @Html.ValidationMessageFor(m => m.ExpectedReturn.Minute)
                    </span>
                </div>
                <div id="DateIn">
                    <div class="editor-label">
                        @Html.LabelFor(m => m.Resource.DateIn)
                    </div>
                    <span class="editor-field">
                        @Html.TextBoxFor(m => m.DateIn.Date, new { @Id = "resource_datein", @class = "datepicker", maxlength = "10" })
                        @Html.TextBoxFor(m => m.DateIn.Hour, new { @Id = "resource_hour", maxlength = "2" })
                        :
                        @Html.TextBoxFor(m => m.DateIn.Minute, new { @Id = "resource_minute", maxlength = "2" })
                    </span>
                    <span>
                        @Html.ValidationMessageFor(m => m.DateIn.Date)
                        @Html.ValidationMessageFor(m => m.DateIn.Hour)
                        @Html.ValidationMessageFor(m => m.DateIn.Minute)
                    </span>
                </div>

Which is part of

@using (Ajax.BeginForm("CreateResource", "Resource", new { }, new AjaxOptions { HttpMethod = "Post", OnSuccess = "systematic_resource.successRequest" }, new { Id = "resource_form" }))

The thing I am not sure about is how I make the DateIn in my JQuery refere to my @Id = "resource_datereturn" I cant see how I am supposed to link them together so it makes the check on that inputfield. The http://docs.jquery.com/Plugins/Validation/validate doc seems pretty useless.

I did this yesterday in our project.

Add two custom validation methods.

$.validator.addMethod("validatefromdate", function(value, element) {
    var parent = $(element).parent();

    //since you have the parent element use jQuery to find the other input field

    return true or false;
}, " Invalid Date Range");

$.validator.unobtrusive.adapters.addBool("validatefromdate");

$.validator.addMethod("validatetodate", function(value, element) {
    var parent = $(element).parent();
    //since you have the parent element use jQuery to find the other input field       

    return true or false;
}, " Invalid Date Range");

$.validator.unobtrusive.adapters.addBool("validatetodate");

You will need to have a container element around the two input's for this approach to work

You will also need two classes server side, a attribute and a validator attribute

public class ValidateFromDateAttribute : ValidationAttribute
{
    public override bool IsValid(object value)
    {
           //validate
    }

    public override string FormatErrorMessage(string name)
    {
        return string.Format("From date must occur before to date");
    }
}

Validator

 public class ValidateFromDateValidator : DataAnnotationsModelValidator<ValidateFromDateAttribute >
    {
        public ValidateFromDateValidator (ModelMetadata metadata, ControllerContext context, ValidateFromDateAttribute attribute)
            : base(metadata, context, attribute)
        {
        }

        public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
        {

            var rule = new ModelClientValidationRule
                           {
                               ErrorMessage = this.ErrorMessage,
                               ValidationType = "validatefromdate"
                           };

            return new[] { rule };
        }
    }