2017-11-22 18 views
0

Google은 사이트를 다시 디자인하고 있으며 해당 재 설계의 일부는 스크린 리더 등이 사이트에 액세스 할 수 있도록합니다. 최신 버전 (2.8.0)을 사용하고 있습니다. 다음과 같은 일이 발생합니다 --- 우리의 폼에있는 모든 텍스트, select 및 textarea 필드에 대한 유효성 검사가 완벽하게 작동합니다. 액세스가 가능하도록 확인란과 라디오 입력이 태그로 묶입니다. 체크 박스 세트에 대한 HTML은 다음과 같습니다확인란의 유효성을 검사 할 때 parsley.js가 실패합니다.

<div class="form-group"> 
    <p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p> 
    <div class="checkbox"> 
     <label id="applicant_type_patient_desc"> 
      <input type="hidden" name="applicant_type_patient" id="" value="N"> 
      <input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other."> 
      A patient 
     </label> 
    </div> 

오류 메시지없이 더 체크 박스 div의 다음과 폼 그룹 래퍼 용의 종료 DIV로 끝났다.

양식을로드하고 '제출'을 클릭하면 모든 텍스트 입력란이 올바르게 인증됩니다. 위의 확인란에 '필수'를 추가하면 '제출'을 클릭해도 아무런 변화가 없으며 양식이 유효성 검사없이 제출됩니다.

필요에 따라 라디오 버튼 세트의 유효성을 검사하려고 할 때도 똑같은 일이 발생합니다.

사용자 정의 jQuery와 파슬리 코드로 div를 생성하여 모든 오류 메시지를 보관하고 오류 메시지를 필드 id에 대한 링크로 변환하여 화면 판독기가 오류 메시지의 필드에 집중할 수 있도록합니다. 하지만 imho는 양식 유효성 검사가 시작되지 않는 이유에 아무런 영향을 미치지 않습니다.

저는 당황하고 있습니다.

FYI - 이전 버전 (2.0.3)의 파슬리를 사용하여 이것을 시도했지만 유효성 검사가 실제로 작동했지만 사용자 정의 오류 처리는 모두 무시되었습니다.

어떤 통찰력이라도 대단히 감사하겠습니다.

+0

실례를 게시 할 수 있습니까? –

+0

추수 감사절 휴일 이후에 그렇게됩니다. –

+0

마침내 다음 바이올린을 만들 수있었습니다. [link] https://jsfiddle.net/5bbfdhtp. 이 버전에서 실행하고 제출을 클릭하면 텍스트 필드에 대한 유효성 검사가 올바르게 작동하는 것을 볼 수 있습니다. html로 가서 '필수'를 첫 번째 체크 박스 필드에 추가하면 실제 바이올린이 실패합니다. –

답변

0

파슬리는 text, textarea에 대해 errorswrapper 요소를 다르게 처리하고 확인란을 선택하고 라디오 버튼을 선택합니다.

텍스트, textarea 및 select의 시작 래퍼 요소에는 parsley-data-id 속성이 포함되어 있지만 checkbox 및 라디오 버튼 요소에는 parsley가 생성했거나 html에 수동으로 입력했는지 여부에 관계없이 parsley-data-multiple 속성이 포함되어 있습니다.

내 코드가 parsley-data-id를 찾고 물론 jquery 선택기가 실패하여 오류가 발생했습니다. 우리가 크롬 검사기의 페이지를보고있는 동안 동료가이 사실을 알 수있었습니다. 오류를봤을 때, 폼에 간단한 조정을하면 : 오류 이벤트 함수는 모든 것이 작동하도록 허용했습니다.