Question

我正在尝试使用StartDate验证EndDate和System.ComponentModel.DataAnnotations，以使“结束日期”不能小于“开始日期”。在我的模型中，我将日期定义如下：

public partial class MyModel
{
    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    public DateTime EndDate { get; set; }
}

我还创建了如下的视图模型：

public class CompareDateVM : IValidatableObject
{

    public MyModel myModel { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext) {

        if (myModel.EndDate < myModel.StartDate) {
            yield return
              new ValidationResult(errorMessage: "End Date cannot be lesser than Start Date.",
                                   memberNames: new[] { "EndDate" });
        }
    }
}

服务器端验证有效，并且错误消息能够显示在我的视图页面的`@ Html.ValidationSummary（）中，但是我无法在客户端上进行验证。

@model CompareDateVM
<form asp-controller="AddDate" asp-action="Add" method="post">

    <label class="label">Start Date</label>
    <input type="date" asp-for="myModel.StartDate" />
    <span asp-validation-for="myModel.StartDate" class="validation"></span><br /><br />

    <label class="label">End Date</label>
    <input type="date"  asp-for="myModel.EndDate" />
    <!-- This is where the client side validation error message show up, but it does not appear-->
    <span asp-validation-for="myModel.EndDate" class="validation"></span>

    <input type="submit" value="Add Date" />
</form>
<!-- Server side validation works -->
<p>@Html.ValidationSummary()</p>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

如何通过jQuery Unobtrusive Validation使<span asp-validation-for="myModel.StartDate" class="validation"></span>在客户端显示错误消息？

Answer 1

要在ASP.NET/ASP.NET Core MVC中获得自定义的非侵入式验证，您需要使用RemoteAttribute，如下所示：

第1步：您的Model类应如下：

public partial class MyModel : IValidatableObject
{
    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    [Remote(action: "IsEndDateSmallerThanStartDate", controller: "Validation", AdditionalFields = nameof(StartDate), ErrorMessage = "End Date cannot be lesser than Start Date.")]
    public DateTime EndDate { get; set; }

   // This is for server side protection
   public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
   {
       if (EndDate < StartDate)
       {
          yield return new ValidationResult(errorMessage: "End Date cannot be lesser than Start Date.", memberNames: new[] { "EndDate" });
       }
   }
}

步骤2：然后在验证控制器中：

public class ValidationController : Controller
{
    public JsonResult IsEndDateSmallerThanStartDate(DateTime endDate, DateTime startDate)
    { 
        bool isEndDateGreaterThanStartDate =  endDate > startDate;
        return Json(isEndDateGreaterThanStartDate); // if isEndDateGreaterThanStartDate variable value is true, that means validation is successful, if false that means validation fails.
    }
}

请记住，您不需要任何ViewModel，因此请删除ViewModel。

步骤3：然后，您的cshtml文件应如下所示：

@model MyModel

<form asp-controller="AddDate" asp-action="Add" method="post">
    <!-- Server side validation works -->
    <p>@Html.ValidationSummary()</p>

    <label class="label">Start Date</label>
    <input asp-for="StartDate" class="form-control" />
    <span asp-validation-for="StartDate" class="validation"></span><br /><br />

    <label class="label">End Date</label>
    <input asp-for="EndDate" class="form-control" />
    <span asp-validation-for="EndDate" class="validation"></span>

    <input type="submit" value="Add Date" />
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

希望现在一切都会按预期进行！

在两个日期之间进行比较的ASP.NET MVC jQuery非侵入式验证

1 个答案: