Bagaimana untuk Memohon Pengesahan Kelas pada Kotak Teks Dinamik dalam Jadual Menggunakan Pengesahan Tidak Menganggur jQuery?

Menetapkan Pengesahan Kelas untuk Kotak Teks Dinamik dalam Jadual

Memahami Masalah

Anda mempunyai jadual dinamik dengan kotak teks dan anda mahu menggunakan kelas pengesahan kepada semua kotak teks ini. Pengesahan jQuery yang tidak mengganggu adalah tidak mendaftarkan kotak teks yang ditambahkan, mengakibatkan pengesahan tidak berfungsi.

Menangani Isu

Untuk menyelesaikannya, anda perlu:

• Tambah atribut data: Sertakan atribut data-val yang diperlukan pada kotak teks.
• Jana elemen pemegang tempat: Cipta elemen pemegang tempat untuk memaparkan mesej pengesahan.
• Benarkan pengindeks tidak berturut-turut: Sertakan input tersembunyi untuk pengindeks untuk membolehkan pengindeks bukan berturut-turut untuk yang disiarkan koleksi.

HTML yang dikemas kini dengan Input Tersembunyi Pengindeks

@for (int i = 0; i < Model.TargetInfo.Count; i++)
{
    <tr>
        <td>
            @Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_U, new { id = "", @class = "form-control" })
            @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_U)
            <input type="hidden" name="TargetInfo.Index" value=@i />
        </td>
        <!-- Other columns with similar markup -->
    </tr>
}

JavaScript dikemas kini dengan Pengindeks Bukan Berturut-turut

var form = $('form');
var newrow = $('#newrow');
var tablebody = $('#tablebody');

$("#btnAddTarget").click(function() {
    var index = (new Date()).getTime();
    var clone = newrow.clone();
    clone.html($(clone).html().replace(/#/g, index));
    var row = clone.find('tr');
    tablebody.append(row);

    // Reparse the validator using unobtrusive validation
    form.data('validator', null);
    $.validator.unobtrusive.parse(form);
});

Petua Tambahan

• Penghuraian semula pengesahan yang tidak mengganggu diperlukan selepas menambah dinamik kandungan.
• Pengindeks tersembunyi membolehkan pemadaman baris tidak berturut-turut.
• Gunakan CSS untuk penggayaan dan bukannya gaya sebaris.
• Pertimbangkan untuk menggunakan paparan separa untuk kebolehselenggaraan.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Pengesahan Kelas pada Kotak Teks Dinamik dalam Jadual Menggunakan Pengesahan Tidak Menganggur jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!