Comment valider qu'une date est plus récente qu'une autre et afficher un avertissement en cas d'échec ?

Question

J'ai 2 champs de saisie qui ont chacun un sélecteur de date, aucun d'entre eux n'est obligatoire, mais s'ils sont saisis, le champ 1 doit être plus bas (plus récent) que l'autre.

J'ai donc trouvé http://webcloud.se/log/Form-validation-with-jQuery-from-scratch/ mais je n'arrive pas à comprendre comment le faire fonctionner, j'ai créé ce 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"
            }

        }
    }

});

Celui-ci est alors censé valider cette page 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>

Qui fait partie de

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

La chose dont je ne suis pas sûr, c'est comment je fais pour que la DateIn dans mon JQuery fasse référence à mon @Id = "resource_datereturn" Je ne vois pas comment je suis censé les lier ensemble pour que la vérification se fasse sur ce champ d'entrée. Les http://docs.jquery.com/Plugins/Validation/validate La doc semble assez inutile.

Answer 1

C'est ce que j'ai fait hier dans le cadre de notre projet.

Ajouter deux méthodes de validation personnalisées.

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

Pour que cette approche fonctionne, il faut que les deux entrées soient entourées d'un élément conteneur.

Vous aurez également besoin de deux classes côté serveur, un attribut et un validateur. attribut

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

Valideur

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