테이블의 동적 텍스트 상자에 대한 유효성 검사 클래스를 설정하는 방법은 무엇입니까?

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

이 문제는 동적 텍스트 상자 행이 포함된 테이블을 생성할 때 발생하며 목표는 모든 텍스트 상자에 유효성 검사 클래스를 추가하는 것입니다.

원본 코드는 jQuery를 사용하여 input.input-validation-error 클래스를 테이블 내부의 모든 텍스트 상자에 적용했지만 클래스를 올바르게 적용하지 못했습니다. 이 문제를 해결하려면 다음이 필요합니다.

1. 텍스트 상자에 Data-Val 속성 추가:

원활한 클라이언트 측 유효성 검사를 보장하려면 유효성 검사 메시지를 표시하기 위해 텍스트 상자와 자리 표시자 요소에 필요한 data-val 속성을 포함하는 것이 중요합니다. 이를 통해 jquery.validate.unobtrusive.js가 클라이언트 측 유효성 검사를 수행할 수 있습니다.

2. 기본 ClsTargetInfo 개체 제공:

기본 ClsTargetInfo 개체를 사용하여 TargetInfo 속성을 초기화합니다. 이 객체의 HTML 표현은 뷰에서 생성됩니다.

3. 동적 행에 대한 HTML 수정:

HTML 내에서 텍스트 상자에서 불필요한 ID 속성을 제거하고 유효성 검사 메시지에 대한 자리 표시자 요소를 추가합니다. 또한, 비연속적인 인덱싱을 허용하려면 인덱서에 대한 숨겨진 입력을 포함해야 합니다.

4. 새 행의 HTML 생성:

양식 태그 외부 숨겨진 요소를 만들고 동적 행의 HTML을 해당 요소에 복사합니다. 모든 인덱서 인스턴스를 더미 문자로 바꾸고 숨겨진 입력 값을 더미 문자와 일치하도록 업데이트합니다.

5. 새 행 추가를 위한 JavaScript:

JavaScript를 업데이트하여 새 행을 복제하고 더미 인덱서 문자를 고유한 인덱서로 바꾼 다음 새 행을 추가합니다. 클라이언트 측 유효성 검사를 활성화하려면 새 행을 추가한 후 유효성 검사기를 다시 구문 분석하는 것을 잊지 마세요.

6. 추가 참고 사항:

• 인라인 스타일 대신 CSS를 사용하여 스타일을 지정하는 것이 좋습니다.
• 인덱싱을 위해 삭제 버튼 대신 숨겨진 입력을 사용하는 것이 좋습니다.
• BeginCollectionItem 활용 더 나은 유지 관리를 위한 도우미입니다.

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