Question

我有一个Kendo自动完成功能，当我们在其中键入内容时会填充。现在我想在用户不从“已填充”字段中选择“选项”时验证此自动完成功能。例如，如果我有一个国家列表，当我键入前3个字符时，则自动弹出弹出。现在用户必须从弹出中选择任何字段。我的意思是我想强制用户选择Countries.My代码到目前为止如下：

@(Html.Kendo().AutoComplete()
  .Name("Account")
  .DataTextField("AccountName")
  .Filter("contains")
  .MinLength(3)
  .Template("#=data.AccountName#")
  .Events(events => events.Select("AccountSelect").Change("ChangeEntity"))
   .HtmlAttributes(new { style = "width: 240px;" })
   .DataSource(source =>
           {
              source.Read(read =>
               {
                 read.Action("GetTransaction123", "Cashbox");
                    })
    .ServerFiltering(true);
           })
   )

我想在此自动完成

的更改事件上编写一些代码

function ChangeEntity(e)
    {
        $(document).ready(function () {
            $("#transaction").validate({
                success: "valid",
                submitHandler: function () { alert("Submitted!") }
            })
        });

    }

Answer 1

您可以使用“选择”和“更改”事件来测试用户是否已选择或键入有效选项。如果输入的文本不在列表中，则会将其清空。

      @(Html.Kendo().AutoComplete()
              .Name("Account")
              .DataTextField("AccountName")
              .Filter(FilterType.Contains)
              .HtmlAttributes(new { style = "width: 100%" })
              .Suggest(true)
              .HighlightFirst(true)
              .MinLength(3)
              .Events(e => e.Select("accountSelect"))
              .Events(e => e.Change("accountChange"))
              .DataSource(source => source
                .Read(read =>
                  read.Action("GetTransaction123", "Cashbox")
                )
                .ServerFiltering(true)
              )
      )    

<script>
  var accountIsValid = false;  

  // This was a valid account! Set the accountIsValid flag.
  function accountSelect(e) {
    accountIsValid = true;
  }

  // Clear the account field if the choice was not valid
  function accountChange(e) {
    if (!accountIsValid) {
      this.value('');
    }
    // Reset the accountIsValid flag for next run
    accountIsValid = false;
  }
</script>

Answer 2

根据我的理解，您希望在提交表单时对AutoComplete进行验证

如果这是一个场景，那么您可以使用表单验证，如下面的

<div id="yourForm">
     @(Html.Kendo().AutoComplete().Name("Account")......
     <span class="k-invalid-msg" data-for="Account"></span>
 </div>


<script>
    $("#yourForm").kendoValidator({
        rules: {
          customRule1: function(input) {
              if (input.is("[name=Account]")) {
                return input.val() === "";
              }
              return true;
            }
          },
        messages: {
            customRule1: "Account field is required"
        }
    });
</script>

Kendo自动填充必须选择验证

2 个答案: