屏幕上未显示Asp.net MVC自定义客户端验证

时间:2018-07-20 19:28:52

标签: asp.net asp.net-mvc asp.net-validators

我正在尝试首次实施不打扰的客户端验证。我感觉我非常接近,只是无法让消息显示在屏幕上。如果有人可以在正确的方向指导我,我将不胜感激。这是我到目前为止所拥有的。

Validation Attribute 
public class WellTestRecordVal : ValidationAttribute , IClientValidatable
{
    private WellTestViewModel record;

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        record = (WellTestViewModel) validationContext.ObjectInstance;


        if (record.WtStartTime > record.WtEndtime)
            return new ValidationResult("This is my server val message.");

        return ValidationResult.Success;
    }


    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var startDate = DateTime.Today;

        var rule1 = new ModelClientValidationRule();
        rule1.ValidationType = "startdaterule";
        rule1.ErrorMessage = "this is my iclient val message.";

        return new[] {rule1};
    }

我已将其应用于模型上的属性,如下所示:

[WellTestRecordVal]
[DataType(DataType.DateTime)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-ddThh:mm:ss}")]
public DateTime WtStartTime { get; set; }

我的捆绑包中有我需要的所有unobtrusive.js和validate.unobtrusive.js文件。

我的视图对元素进行了验证。

 <label>
                 <span>Start Date</span>
                    @Html.TextBoxFor(x => x.WtStartTime, "{0:yyyy-MM-ddThh:mm:ss}", new { @class = "form-control", @type = "datetime-local", id = "startDate" })
                    @Html.ValidationMessageFor(m => m.WtStartTime)
                </label>

我的视图Jquery就是这样。

 <script type="text/javascript">
$.validator.addMethod("startdaterule",
function(value, element, params) {
    var endDate = $("#endDate").val();
    if (value > endDate) {
        return false;
    }
    return true;

});

$.validator.unobtrusive.adapters.add("startdaterule",function(options) {
    options.rules["startdaterule"] = {};
    options.messages["startdaterule"] = options.message;
});

我在视图上使用的是Ajax.BeginForm。

当我检查它时,我可以看到GetClientValidationRules中的消息正在进入视图。

我不知道该怎么显示在视图本身中?我觉得我缺少了一些非常简单的信息,以至于我可能忽略了我对此进行回顾的几种资源。

2 个答案:

答案 0 :(得分:0)

这是另一种方法,但是对于条件验证,我建议使用foolproof验证。

为此,您需要:

  1. 安装follproof nuget package
  2. mvcfoolproof.unobtrusive.js添加到脚本(get it from here

然后您可以使用条件验证,如下所示:

public class MyModel 
{
    public DateTime WtStartTime { get; set; } 

    /* I want end time to be greater than or equal to start time */
    [GreaterThanOrEqualTo("WtStartTime", ErrorMessage="End should be >= Start")]
    public DateTime WtEndtime{ get; set; } 

}

就是这样,您无需编写自己的JavaScript代码即可进行客户端验证。请注意,您需要将ValidationSummary添加到视图中。您需要在视图中添加以下行,它会显示错误消息。

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

答案 1 :(得分:0)

购买本书后,我可以缩小范围。专业的ASP.NET MVC5。我的语法非常接近。我有两个问题。第一,我没有传递任何参数来检查我的值。其次,我需要在渲染的验证脚本之前调用@Scripts.Render("~/bundles/jqueryval")。仅包含它还不够好。顺序很重要。