0

在 ASP.NET 我有以下

public class TestController : Controller
{
    public IActionResult Index()
    {
        return View(new MyModel()
        {
            Activities = new Activity[]
            {
                new Activity(){ },
                new Activity(){ }
            }
        });
    }
}

public class MyModel
{     
    public IList<Activity> Activities { get; set; }
}

public class Activity
{
    public bool IsActive { get; set; }
}

cshtml

@model Metatasker.Integration.UI.Controllers.MyModel

<form id="myform">
    @for (int i = 0; i < Model.Activities.Count; i++)
    {
        @Html.CheckBoxFor(x => x.Activities[i].IsActive)
    }
</form>
<button id="btn">Click Me</button>

<script type="text/javascript">
    $(function () {
        function validate() {
            var kendoValidator = $('#myform').kendoValidator().data("kendoValidator");
            return kendoValidator.validate();
        }

        $("#btn").click(function () {
            alert(validate());
        })
    })
</script>

我正在使用 Kendo 的 Validate 方法来验证表单。在上面的代码中，当我有多个 CheckBoxesvalidate()方法总是返回false。如果我有单个复选框，那么它可以工作。

我有 jsfiddle 演示。jsfiddle 中的 html 是渲染的 Razor 视图。

演示

4

1 回答 1

1

试试下面的代码片段。

 <form id="form1">
      <!-- Kendo UI Checkbox -->
      <input type="checkbox" id="checkboxMale" name="Gender" required />
      <label for="checkbox">Male</label>
      <span class="k-invalid-msg" data-for="Gender"></span>
      <input type="checkbox" id="checkboxFemale" name="Gender" required />
      <label for="checkbox">Female</label>
      <span class="k-invalid-msg" data-for="Gender"></span>
     <button>Validate</button>
    </form>

    <script>
      $(document).ready(function() {
        var validator = $("#form1").kendoValidator().data("kendoValidator");
      });
    </script>

您会注意到验证器仅将真实值视为已填充的输入，否则它会提供所需的验证消息。每个复选框都单独验证。

所以，我建议使用自定义规则。

<form id="myform">
    <ul validationMessage="You must enter a gender">
      <li>
        <input id="activity1" name="activity" type="checkbox" value="activity1" />
        <label  for="activity1">Activity1</label>
      </li>
      <li>
        <input id="activity2" name="activity"  type="checkbox" value="activity2" />
        <label for="activity2">Activity2</label>
      </li>
    </ul>
    <button>Validate</button>
</form>

<script>
    $("#myform").kendoValidator({
      rules: {
        customRule1: function(input) {          
          if (input.is("[name=activity]")) {
            return $("[name='activity']:checked").length > 0;
          }
        }
      },
      messages: {
        customRule1: "Atleast one activity should be selected."
      }
    });
</script>

还有一个使用单选按钮的演示，您可以参考。

于 2019-04-09T09:27:13.317 回答