1

这几乎要了我的命。我从来没有在一个问题上浪费过这么多时间。我有一个需要通过调用 REST API 来验证的字段,因为它需要检查数据库中是否存在某些数据。我遇到的问题是,即使调用 json api 返回 false,调用 validator.validate 也会返回 true。

这是代码(我使用 Kendo MVC 助手,但与问题无关)

<div id="divValidator1">
<div class="form-group">
    @Html.LabelFor(m => m.Email)
    @(Html.Kendo().TextBoxFor(m => m.Email)
          .HtmlAttributes(new { placeholder = "you@domain.com", type = "email", @class = "k-textbox required",data_bind="value: XXX" })
    )
</div>

<footer class="col-xs-12 form-group text-right">
    @(Html.Kendo().Button()
          .Name("Next1")
          .Content("Next")
          .HtmlAttributes(new { @class = "k-primary", data_bind = "enabled: isEnabled" })
          .Events(ev => ev.Click("onNextClick")))
</footer>

var kendoValid = $("#divValidator1").kendoValidator({
    validateOnBlur: false,
     rules: {
            remote: function (input) {
                if (input.val() == "" || !input.attr("data-val-remote-url")) {
                    return true;
                }

                if (input.attr("data-val-remote-recieved")) {
                    input.attr("data-val-remote-recieved", "");
                    return !(input.attr("data-val-remote"));
                }

                var url = input.attr("data-val-remote-url");
                var postData = {};
                postData[input.attr("data-val-remote-additionalfields").split(".")[1]] = input.val();

                var validator = this;
                var currentInput = input;
                input.attr("data-val-remote-requested", true);
                $.ajax({
                    url: url,
                    type: "POST",
                    data: JSON.stringify(postData),
                    dataType: "json",
                    traditional: true,
                    async:false,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {

                        if (data == true) {
                            input.attr("data-val-remote", "");
                        }
                        else {
                            input.attr("data-val-remote", false);
                        }
                        input.attr("data-val-remote-recieved", true);
                     //   validator.validateInput(currentInput);


                    },
                    error: function () {
                        input.attr("data-val-remote-recieved", true);
                        validator.validateInput(currentInput);
                    }
                });
                return true;
            }
        },
        messages: {
            remote: function (input) {
                return input.attr("data-val-remote");
            }
        }
}).data("kendoValidator");

var viewModel1 = kendo.observable({
    XXX:null,
        isEnabled: function () {

            var self = this;

            self.get("XXX");

            var x = $("#divValidator1").data("kendoValidator");

            console.log(x.validate());
        }
    });

    kendo.bind($("#divValidator1"), viewModel1);

这是控制器

public ActionResult IsEmailJustPresent(string email)
    {
        var res = email == "something";

        return Json(res, JsonRequestBehavior.AllowGet);
    }

和 ViewModel

 public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    [Remote("IsEmailJustPresent", "Home")]
    public string Email { get; set; }
}

我还使用了 kendo.observable,以便我可以根据验证值启用/禁用下一个按钮。

在 isEnabled 函数中你看到我做 var x = $("#divValidator1").data("kendoValidator"); 但它总是返回真(似乎只检查所需的属性)。

为了达到那个解决方案,我从这里开始

如果你想要我在git上创建的更复杂的示例,其中包括我在最终项目中需要的向导

4

1 回答 1

1

这条评论线可能是问题吗?

//   validator.validateInput(currentInput);

属性“data-val-remote”是否正确设置?

于 2019-05-09T14:43:23.643 回答