Блог

В 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() , метод всегда возвращается false . Если у меня есть один флажок, тогда он работает.

У меня есть демонстрация jsfiddle. HTML в jsfiddle представляет собой визуализированный вид Razor.

ДЕМОНСТРАЦИЯ

Попробуйте следующий фрагмент.

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

Существует также демонстрационная версия, в которой используются переключатели, на которые вы можете ссылаться.