剑道自动完成必须选择验证答案

【问题标题】：Kendo Autocomplete must select Validation剑道自动完成必须选择验证
【发布时间】：2014-04-08 07:58:58
【问题描述】：

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

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

    }

【问题讨论】：

您是否要确保在提交表单时 AutoCompleteField 具有选定的值？？
是的..我希望用户必须从自动完成中选择值

标签： javascript jquery asp.net-mvc autocomplete kendo-ui

【解决方案1】：

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

      @(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>

【讨论】：

【解决方案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>

【讨论】：