테이블에 동적으로 추가된 텍스트 상자에 대해 클라이언트측 유효성 검사를 수행하는 방법은 무엇입니까?

문제 이해

이 문제는 테이블 내의 동적 텍스트 상자에 유효성 검사 클래스를 적용하려고 할 때 발생합니다. 목표는 "저장" 버튼을 클릭할 때 이러한 텍스트 상자에 대한 유효성 검사를 수행하는 것입니다.

해결책

이 문제를 해결하려면 다음 단계를 구현하는 것이 중요합니다.

1. Data-val 속성 포함: 유효성 검사 메시지를 위한 자리 표시자 요소와 함께 텍스트 상자에 필요한 data-val 속성을 추가합니다. 이러한 속성은 jquery.validate.unobtrusive.js를 사용하는 클라이언트 측 유효성 검사에 중요합니다.
2. 초기 기본 ClsTargetInfo 개체: 모델의 TargetInfo 속성에 기본 ClsTargetInfo 개체를 추가하여 시작하고 뷰에서 HTML을 생성합니다.
3. 숨겨진 요소를 생성합니다. 인덱서: 테이블 행 내에 인덱서에 대한 숨겨진 입력 요소를 포함합니다. 이를 통해 비연속적인 인덱서를 게시하고 컬렉션에 바인딩할 수 있습니다.
4. HTML 템플릿 복사: 테이블 행에 대해 생성된 HTML을 검사합니다. 양식 태그 외부에 있는 숨겨진 요소 내부에 복사하여 모든 인덱서를 더미 문자(#)로 바꿉니다.
5. 테이블에 복제 및 추가: JavaScript 코드에서 새 행을 복제합니다. , 인덱서를 업데이트하고 테이블에 추가합니다.
6. 재분석 유효성 검사기: 새 행을 추가한 후, $.validator.unobtrusive.parse(form)를 사용하여 유효성 검사기를 다시 구문 분석합니다.

추가 참고 사항

• 눈에 띄지 않는 유효성 검사는 data-val 속성 구문 분석에 의존합니다. 양식의 초기 렌더링 시. 따라서 동적 콘텐츠를 추가할 때 재파싱이 필요합니다.
• 인덱서에 대한 숨겨진 입력을 사용하면 컬렉션의 모든 행을 삭제할 수 있습니다.
• 유지관리 효율성을 높이려면 인라인 스타일 대신 CSS를 사용하는 것이 좋습니다. 및 성능.
• 순전히 클라이언트에 행을 추가할 때 더 쉬운 유지 관리를 위해 부분 보기(BeginCollectionItem 도우미)를 활용합니다. 쪽.

위 내용은 테이블에 동적으로 추가된 텍스트 상자에 대해 클라이언트측 유효성 검사를 수행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!