jQuery 비간섭 유효성 검사를 사용하여 테이블의 동적 텍스트 상자에 클래스 유효성 검사를 적용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

jQuery 비간섭 유효성 검사를 사용하여 테이블의 동적 텍스트 상자에 클래스 유효성 검사를 적용하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-22 12:30:11

원래의

329명이 탐색했습니다.

How to Apply Class Validation to Dynamic Textboxes in a Table Using jQuery Unobtrusive Validation?

테이블의 동적 텍스트 상자에 대한 클래스 유효성 검사 설정

문제 이해

텍스트 상자가 있는 동적 테이블이 있고 클래스를 적용하려고 합니다. 이 모든 텍스트 상자에 대한 유효성 검사. jQuery의 눈에 띄지 않는 유효성 검사는 추가된 텍스트 상자를 등록하지 않아 유효성 검사가 작동하지 않게 됩니다.

문제 해결

이 문제를 해결하려면 다음을 수행해야 합니다.

데이터 속성 추가: 필요한 data-val 속성을 텍스트 상자.
자리 표시자 요소 생성: 유효성 검사 메시지를 표시하기 위한 자리 표시자 요소를 만듭니다.
비연속 인덱서 허용: 게시된 항목에 대해 비연속 인덱서를 활성화하는 인덱서 collection.

인덱서 숨겨진 입력으로 업데이트된 HTML

@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

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);
});

로그인 후 복사