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

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

문제 이해

텍스트 상자가 있는 동적 테이블이 있고 클래스를 적용하려고 합니다. 이 모든 텍스트 상자에 대한 유효성 검사. 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);
});

추가 팁

• 동적 추가 후 눈에 띄지 않는 유효성 검사 재분석이 필요합니다. content.
• 숨겨진 인덱서를 사용하면 연속되지 않은 행을 삭제할 수 있습니다.
• 스타일 지정에는 인라인 스타일 대신 CSS를 사용합니다.
• 유지 관리를 위해 부분 뷰 사용을 고려하세요.

위 내용은 jQuery 비간섭 유효성 검사를 사용하여 테이블의 동적 텍스트 상자에 클래스 유효성 검사를 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!