선택 상자 Jquery 유효성 검사 관련 문제

Question

나는 내 페이지에서 기업을위한 많은 하위 범주가 포함 된 9 개의 선택 상자가 있습니다. 사용자가 9 개의 선택 중 1 개에서만 옵션을 선택해야합니다. 사용자 경험을 향상시키기 위해 모든 선택 상자를 CSS로 숨기고 카테고리의 동적 선택 상자를 생성합니다. 생성 된 드롭 다운에서 카테고리를 선택하면 CSS에 의해 숨겨진 하위 카테고리 선택 상자가 표시됩니다.

내 문제는 유효성 검사가 작동하지 않는 양식을 제출할 때입니다. 방화범이 쳐진 상태로 추가 점검을 할 때 유효성 검증이 실행되는 것처럼 보이지만 첫 번째 숨겨진 선택 상자 (먹고 마시는 것)에만 해당됩니다. 당신이 예제 페이지를 보면 내가 함께 넣어 가지고 내가 카테고리 음식에 대한 희망으로 모든 작동합니다

http://www.clawg.co.uk/jstest/errortest.html

* No category submit form show error message 
* No subcategory submit form show error message 
* Change category or subcategory to blank show error message 

당신은 어떤 다른 카테고리를 선택하면 내가이 얻을 하위 카테고리를 비워 둡니다 첫 번째 항목에 계속 첨부되어 있지만 표시 할 집합으로 볼 수없는 오류 메시지 : 없음 이상하게도, 하위 카테고리 선택 상자를 클릭하면 오류 메시지가 올바른 항목에 추가되지만 실제로 제출하려면 작동해야합니다.

이 하나가 정말 나를 미치게합니다. 도와주세요

Answer 1

여기에 몇 가지 놀이가 있습니다.

첫 번째 두 가지 옵션 이외의 다른 모든 옵션이 제출시 유효성을 확인하지 않는 이유는 다른 모든 선택 항목의 이름이 똑같은 이름 ("카테고리 []")이기 때문입니다. validate.js 코드를 살펴보면 제출하는 동안 확인할 요소 목록을 작성할 때 규칙에 첨부 된 이름이있는 첫 번째 요소 만 선택합니다 (444 행). 요소에 규칙 (이름)이 있는지 여부를 찾는 방식 때문에 다른 선택 항목 중 하나에 실제로 규칙을 추가 한 경우에도 항상 "cateogory []"라는 이름으로 첫 번째 선택 항목을 선택합니다.

그러나 셀렉트가 포커스를 얻었을 때 (잃어 버리거나 바뀌면) 유효성 검사는 발견 한대로 실행됩니다. 이를 수행하는 프로세스는 모든 양식 요소를 점검해야하는 양식을 제출할 때 실행되는 프로세스와 별개입니다.

jquery.validate.js 파일에서 Firebug를 사용하여 중단 점을 설정하면 어떤 일이 발생했는지 확인할 수 있습니다.