kendoGrid弹出窗口自定义验证,多个字段

时间:2019-01-14 13:41:29

标签: angular validation kendo-ui

我有一个ASP.NET Core,Angular(2)网格和弹出窗口,我正在尝试对多个字段实施自定义验证。

如果我尝试实现如下所示的两个版本的自定义验证,则第二个验证要等到第一个通过时才能运行,这样很好,但是第二个验证消息不会出现在弹出窗口中。

schema: {
      model: {
        id: "contactID",
        fields: {
          contactID: { type: "number" },
          lastName: { type: "string" },
          firstName: { type: "string" },
          name: { type: "string" },
          jobTitle: { type: "string" },
          jobTitleID: {
            type: "number",
            validation: {
              jobTitleIdValidation: function (input, params) {

                if (input.is("[name='jobTitleID']")) {
                  var $jobTitleId = kendo.jQuery('#jobTitleID');
                  var jobTitleIdValue = $jobTitleId.data("kendoComboBox").value();

                  if (parseInt(jobTitleIdValue, 10) === 0 || !jobTitleIdValue) {
                    $jobTitleId.attr('data-jobTitleIdValidation-msg', 'Job title is required');
                    return false;
                  } else {
                    return true;
                  }
                }
              }
            }
          },
          office: {
            type: "string"
          },
          officeID: {
            type: "number",
            validation: {
              officeIdValidation: function (input, params) {

                if (input.is("[name='officeID']")) {
                  var $officeId = kendo.jQuery('#officeID');
                  var officeIdValue = $officeId.data("kendoComboBox").value();

                  if (parseInt(officeIdValue, 10) === 0 || !officeIdValue) {
                    $officeId.attr('data-officeIdValidation-msg', 'Office is required');
                    return false;
                  } else {
                    return true;
                  }
                } else {
                  return true;  // for any other input
                }
              }
            }
          },

模板代码片段:

      editable: {
        mode: "popup",
        template:
`<div id="details" _ngcontent-c2>
<div><label for="firstName">First Name</label>
<input id="firstName" data-bind="value: firstName" /></div>
<div><label for="lastName">Last Name</label>
<input id="lastName" data-bind="value: lastName" /></div>
<div><label for="email">Email</label>
<input id="email" data-bind="value: email" /></div>
<div><label for="phone">Phone</label>
<input id="phone" data-bind="value: phone" /></div>
<div><label for="mobile">Mobile</label>
<input id="mobile" data-bind="value: mobile" /></div>
<div><label for="jobTitleID">Job Title</label>
<input id="jobTitleID" name="jobTitleID" data-bind="value: jobTitleID" /></div>
<div class="validator-msg"><span data-for="jobTitleID" class="k-invalid-msg"></span></div>
<div><label for="officeID">Office</label>
<input id="officeID" name="officeID" data-bind="value: officeID" /></div>
<div class="validator-msg"><span data-for="officeID" class="k-invalid-msg"></span></div>
</div>

但是,如果我尝试在一个自定义验证规则中进行所有验证(这似乎是预期的),并且使用一个验证消息跨度(在jobTitleId下),则在提供jobTitleID之后,它不会显示有关officeID的消息。代码在这里:

          jobTitleID: {
            type: "number",
            validation: {
              customValidation: function (input, params) {

                var $jobTitleId = kendo.jQuery('#jobTitleID');

                if (input.is("[name='jobTitleID']")) {
                  var jobTitleIdValue = $jobTitleId.data("kendoComboBox").value();

                  if (parseInt(jobTitleIdValue, 10) === 0 || !jobTitleIdValue) {
                    $jobTitleId.attr('data-customValidation-msg', 'Job title is required');
                    return false;
                  } else {
                    return true;
                  }
                } else if (input.is("[name='officeID']")) {
                  var officeIdValue = kendo.jQuery('#officeID').data("kendoComboBox").value();

                  if (parseInt(officeIdValue, 10) === 0 || !officeIdValue) {
                    $jobTitleId.attr('data-customValidation-msg', 'Office is required');
                    return false;
                  } else {
                    return true;
                  }
                } else {
                  return true;  // for any other input
                }
              }
            }

如何使它正常运行?我怀疑这与return true到底有关系(?)

请注意,我不想只使用required: true attribute,因为正在显示默认的0值,我还需要验证字段的组合。

0 个答案:

没有答案