Валидатор Kendo всегда возвращает false, когда существует несколько флажков

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

Я использую метод Validate Кендо для проверки формы. В приведенном выше коде, когда у меня есть несколько флажков, метод validate() всегда возвращает false. Если у меня есть один флажок, то он работает.

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

ДЕМО


person LP13    schedule 08.04.2019    source источник


Ответы (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>

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

person Marissa Fernandes    schedule 09.04.2019
comment
Спасибо, я еще не пробовал ваше решение. но мой вопрос заключался в том, почему даже валидатор кендо выдает ошибку, поскольку поле обязательно. С флажками вы check или uncheck они оба имеют значение true или false. - person LP13; 09.04.2019
comment
@ LP13 Я обновил свой ответ, чтобы ответить на ваш запрос. - person Marissa Fernandes; 10.04.2019