在 Kendo 批量编辑中验证 AutoComplete

Question

我正在使用kendo Grid批量编辑，其中我通过Editortemplate使用了AutoComplete，如下：

@(Html.Kendo().AutoComplete()
          .Name("AccountTransactionItemHead")
          .DataTextField("Value_AccountTransactionItemHead")
          //.DataValueField("HeaderID")
          .HtmlAttributes(new { style = "width:250px" })
          .Filter("contains")

          //.AutoBind(true)
          .Events(events => events.Select("HeadComboSelect"))
          .MinLength(3)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetHeadForHeadGrid", "Cashbox");
              })
              .ServerFiltering(true);
          })
)

现在，如果我没有在其中选择任何值，并且如果我移至第二列，它必须验证此字段“请选择自动完成”。 我的Grid和ViewModel如下：

    [Required(ErrorMessage="Please Enter Head")]
        public string AccountTransactionItemHead { get; set; }
        public int lkpQualifier { get; set; }
        public string lkpQualifierType { get; set; }
        [Required(ErrorMessage = "Please Enter Description")]
        [RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Please Use letters only")]
        public string AccountTransactionItemDescription { get; set; }
        [Required(ErrorMessage = "Please Enter Currency")]
        [RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Please Use letters only")]
        public string AccountTransactionItemCurrency { get; set; }  

 columns.Bound(p => p.AccountTransactionItemHead).Title("Head").EditorTemplateName("HeadAutoComplete").ClientTemplate("#=AccountTransactionItemHead#").Width(120);
    columns.Bound(p => p.AccountTransactionItemQualifier).Title("Trade Type").EditorTemplateName("AccountTransactionItemTradeDropDown").ClientTemplate("#=AccountTransactionItemQualifier#" + "<input type='hidden' class='lkpQualifierType' value='#=data.AccountTransactionItemQualifier#' />").Width(100);
    columns.Bound(p => p.TestHeader).ClientTemplate("#=TestHeader# <input type='hidden' class='AccountTransactionHeaderID' value='#=TestHeader#' />").Hidden(true);
    columns.Bound(p => p.AccountTransactionItemDescription).Title("Description").Width(130).ClientTemplate("#= AccountTransactionItemDescription#" + "<input type='hidden' class='AccountTransactionItemDescription'  value='#=data.AccountTransactionItemDescription#' />");
    columns.Bound(p => p.AccountTransactionItemCurrency).Width(80).Title("Currency").EditorTemplateName("CurrencyAutoComplete").ClientTemplate("#= AccountTransactionItemCurrency#" + "<input type='hidden' class='AccountTransactionItemCurrency'  value='#=data.AccountTransactionItemCurrency#' />");
    columns.Bound(p => p.AmtTransact).Width(100).Title("Amt Trans").ClientTemplate("#= AmtTransact#" + "<input type='hidden' class='AmtTransact'  value='#=data.AmtTransact#' />");

我需要验证第一列 AccountTransactionItemHead。

Answer 1

尝试使用剑道验证器..

1.//Grid Custom Validation            
                  $("#GridName").kendoValidator({
                 rules: {
                     // custom rules
                     custom: function (input, params) {

                         if (input.is("[name=AccountTransactionItemHead]")) {

                             //If the input is AccountTransactionItemHead 
                            var autoComplete= input.val()
                             //check value is null or empty
                             if(autoComplete==null || autoComplete=="")
                              retrun false; //trigger validation

                         }

                         //check for the rule attribute
                         return true;
                     }
                 },
                 messages: {
                     custom: function (input) {
                         // return the message text
                         return "please select the AutoComplete!";
                     }
                 }
             })

1. 另一个网格验证

    $("#GridName").kendoValidator({
                    rules: {
   
                        AccountTransactionItemHead: {
                              required: true,
                 productnamevalidation: function (input) {
                                           if (input.is(" [name='AccountTransactionItemHead']") && input.val() == ""){return false; //tigger validation show message }
                        //else valition passed value is not null or empty
                    return true;         
                            }//end of function                                
                        }// end of rules;
                    },
                    messages: {
                        productnamevalidation: function (input) {
                            // return the message text
                            return "please select the AutoComplete!";
                        }
                    }
                })
   

2. 使用 Kenod.Ui.Validator 回答

    //Add validation on Service rate Grid       
   
    (function ($, kendo) {
   
           $.extend(true, kendo.ui.validator, {
               rules: {
                   greaterdate: function (input) {
                       if (input.is("[data-val-greaterdate]") && input.val() != "") {
                           var date = kendo.parseDate(input.val()),
                               earlierDate = kendo.parseDate($("[name='" + input.attr("data-val-greaterdate-earlierdate") + "']").val());
                           return !date || !earlierDate || earlierDate.getTime() < date.getTime();
                       }
   
                       return true;
                   }
   
                   // custom rules
                   taskdate: function (input, params) {
   
                       if (input.is("[name=WorkOrderDetailsDate]")) {
   
                           //If the input is StartDate or EndDate
                           var container = $(input).closest("tr");
                           var tempTask = container.find("input[name=WorkOrderDetailsDate]").data("kendoDatePicker").value();
                           var tempWork = $("#workOrder_EstStartDate").val();
   
                           var workDate = kendo.parseDate(tempWork);
                           var taskDate = kendo.parseDate(tempTask);
                           if (taskDate < workDate) {
                               return false;
                           }
                       }
   
                       //check for the rule attribute
                       return true;
                   }
   
               }, //end of rule                       
               messages: {
                   greaterdate: function (input) {
                       return input.attr("data-val-greaterdate");
                   },                        
                   taskdate: function (input) {
                       return "Task date must be after work date!";
                   },
               }
           });
       })(jQuery, kendo);