Как проверить несколько динамических полей в MVC Entity Framework (сначала модель)

Question

Я создаю свое первое приложение MVC Entity Framework (сначала база данных). Это очень короткая форма, в которой родитель просит установить флажок, чтобы определить, соответствует ли его семья льготному обеду в школе. Под флажком находится поле ввода идентификатора студента. Дополнительные поля идентификатора ученика могут быть сгенерированы с помощью jquery, если в семье более одного ученика.

Моя проблема с проверкой динамически сгенерированных полей, требующих 6 символов. Используя встроенную проверку на стороне клиента, сообщение об ошибке проверки генерируется для всех идентификаторов учеников, даже если только один из них недействителен.

Я часами искал ответы, но не нашел решения, которое применимо и к моей ситуации, и которое я могу понять. Я безуспешно пытался использовать проверку jquery (я не могу ее запустить) и написать собственный метод проверки (я не знаю достаточно о том, что я делаю, чтобы заставить проект работать) .

Моя последняя попытка, которая генерирует сообщение об ошибке для каждого экземпляра идентификатора студента, выглядит следующим образом:

$(add_button).click(function (e) {
        e.preventDefault();
        //Check maximum allowed input fields
        if (x < max_fields) {
            x++; //input field increment

            $(wrapper).append('<div class="divStudent"><label class="control-label col-md-4" name="lblStudent">Student ID</label><div class="col-md-8 form-group">' +
                '<input type="text" name="StudentID" class="form-control txtStudentID text-box col-md-3" placeholder="Enter Student ID number" />' +
                '<button type="button" class="btn btn-default remove_field"><i class="fa fa-minus"></i></button>' +
                '<a href="javascript:void(0);" class="remove_field"> Remove</a>' +
                '<span class="field-validation-valid text-danger error" data-valmsg-for="StudentID" data-valmsg-replace="true" name="errorStudentID"></span>' +
                '</div></div>');

        }
    });

 //The code below does absolutely nothing, as if it wasn't even there  
        $("#SurveyForm").validate(
            {
                onfocusout: function (element) {
                    // "eager" validation
                    this.element(element);
                },
                rules:
                {
                    StudentID:
                    {
                        required: true
                    }
                },
                messages:
                {
                    StudentID:
                    {
                        required: "Please enter your studentid"
                    }
                }
            });

Моя модель:

namespace InTouchSurvey.Models
{
    using System;
    using System.Collections.Generic;

    public partial class SurveyResponse
    {
        public int ID { get; set; }
        public string StudentID { get; set; }
        public bool IsFreeLunch { get; set; }
        public bool IsReducedLunch { get; set; }
        public bool IsPaidLunch { get; set; }
    }
}

MetaData.cs:

using System;
using System.ComponentModel.DataAnnotations;

namespace InTouchSurvey.Models
    {
    public partial class SurveyResponse
        {
        public class SurveyResponseMetaData
            {

            [Display(Name = "Student ID")]
            [Required]
            [StringLength(6, MinimumLength = 6, ErrorMessage = "The Student ID must contain exactly 6 digits")]           
            public string[] StudentID;             

            }       
        }
    }

Сгенерированный HTML (отредактировано для краткости):

<div id="AddStudentPartial">

    <div class="divStudent">

        <input class="form-control txtStudentID text-box single-line" data-val="true" data-val-length="The Student ID must contain exactly 6 digits" data-val-length-max="6" data-val-length-min="6" data-val-required="The Student ID field is required." id="StudentID" name="StudentID" placeholder="Enter Student ID number" type="text" value="">

        <span class="field-validation-valid text-danger error" data-valmsg-for="StudentID" data-valmsg-replace="true" name="errorStudentID"></span>         

    </div>

    <div class="divStudent">

        <input type="text" name="StudentID" class="form-control txtStudentID text-box col-md-3" placeholder="Enter Student ID number">
        <button type="button" class="btn btn-default remove_field"></button>
        <span class="field-validation-valid text-danger error" data-valmsg-for="StudentID" data-valmsg-replace="true" name="errorStudentID"></span>

    </div>

</div>

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