Как я могу потребовать, чтобы массив имел хотя бы один элемент с помощью проверки на стороне клиента?

Question

У меня есть форма, на которой пользователь может вводить вопросы через текстовое поле. Нажав кнопку, он может динамически генерировать больше текстовых полей для ввода вопросов. Я использую Knockout с клиентской моделью просмотра, с которой связаны вопросы.

Мой упрощенный вид (Razor) выглядит следующим образом:

<div data-bind="foreach: openQuestions"> 
    <div class="form-group"> 
     <input type="hidden" data-bind="value: currentIndex" name="openQuestions.Index" /> 
     <textarea class="form-control" rows="3" data-bind="value: question, attr: { name: 'openQuestions[' + $data.currentIndex + '].Question' }"/> 
    </div> 
</div> 
@Html.ValidationMessageFor(m => m.OpenQuestions) 

Часть из Knockout VM:

function OpenQuestion() { 
    var self = this; 

    self.currentIndex = GetRandomIndex(); 
    self.question = ko.observable(); 
} 

function QuestionViewModel() { 
    var self = this; 
    self.openQuestions = ko.observableArray(); 

    self.addOpenQuestion = function() { 
     self.openQuestions.push(new OpenQuestion()); 
    } 
} 

Есть два валидация, которые должны произойти:

1. ' Список OpenQuestions не должен быть пустым (так! = Null и> = 1 запись)
2. Каждый вопрос в указанном списке не может быть пустым или нулевым.

У меня возникли трудности с подключением валидатора jQuery для проверки минимальной длины массива. Проблема, я думаю, в том, что когда страница загружена, нет элемента с именем «OpenQuestions», поскольку вопросов еще нет. Если вы представите на этом этапе, валидатор не сможет найти какие-либо элементы для проверки и просто предполагает, что все действительно, а это не так.

Я пробовал создать настраиваемый атрибут проверки минимальной длины, но я столкнулся с той же проблемой - с каким элементом вы ее подключаетесь?

В основном этот метод проверяет, может ли он найти какие-либо элементы, такие как предоставленное имя (например, «openquestions», но «openquestions [123456]» тоже будет работать) и сравнить эту длину с минимально необходимой длиной.

$.validator.addMethod("minarraylength", 
    function (value, element, parameters) { 
      var minLength = parameters["minlength"]; 

      if (element) { 
       var elementName = $(element).attr("name").toLowerCase(); 

       var actualLength = $("input").filter(function() { 
        var currentName = $(this).attr("name"); 
        return currentName != undefined && currentName.toLowerCase().indexOf(elementName); 
       }).length; 

       return actualLength >= minLength; 
     } 

     return true; 
    } 
); 

В сочетании со скрытым полем, как так

@Html.HiddenFor(m => m.OpenQuestions) 

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

Итак, вопрос в том, как я могу подключить валидатор jQuery в свой динамически сгенерированный список, обеспечить привязку модели к обратной передаче, но предотвратить отправку пустых списков?

Заранее благодарен!

Answer 1

Вы можете просто расширить свои объекты KO, смотрите ниже:

Шаг 1: Создание пользовательских KO правило массива по меньшей мере, 1 требование

ko.validation.rules["atLeastOne"] = { 
    validator: function(value, validate) { 
     if (validate && Array.isArray(value)) { 
      return !!value.length; 
     } 
     return true; 
    }, 
    message: "Please add at least one." 
}; 

Шаг 2 Обновите код :

function OpenQuestion() { 
    var self = this; 

    self.currentIndex = GetRandomIndex(); 
    self.question = ko.observable().extend({ 
     required: true, 
     minLength: 1 
    }); 
} 

function QuestionViewModel() { 
    var self = this; 
    self.openQuestions = ko.observableArray().extend({ 
     atLeastOne: { 
      message: "Please add at least one." 
     } 
    }); 

    self.addOpenQuestion = function() { 
     self.openQuestions.push(new OpenQuestion()); 
    } 
}