jQuery Validate를 사용하여 TINYMCE Editor의 유효성을 검사하는 방법

Question

양식을 만들 때 양식 (유효화 편집기 텍스트 영역 포함)의 유효성을 검사하고 싶습니다.

이것은 내 코드입니다.

$('#edit_info').validate({ 
    errorElement: 'span', 
    errorClass: 'error', 
    focusInvalid: false, 
    ignore: "", 
    rules: { 
     title: { 
      required: true 
     }, 
     logo: { 
      required: true 
     }, 
     sort: { 
      required: true 
     }, 
     show_on_dashboard: { 
      required: true 
     }, 
     description: { 
      required: true 
     } 
    } 
}); 

하지만 '제출'을 2 번 누른 다음 유효성 검사를 수행해야합니다. 왜 그런가?

Answer 1

TinyMCE를 페이지에 삽입하면 원본 양식 요소 (예 : <textarea>)가 더 이상 표시되지 않습니다. 브라우저 툴을 사용하는 경우, TinyMCE가 을 효과적으로 숨기는 <div> 및 시리즈를 주입하는 것을 볼 수 있습니다.

따라서 jQuery에 <textarea>의 값을 확인하도록 요청하면 처음 TinyMCE를로드했을 때의 초기 값이 유지 될 가능성이 높습니다.

jQuery가 기본 <textarea>의 유효성을 검사하려면 먼저 <textarea>을 TinyMCE의 현재 내용으로 업데이트해야합니다. 이렇게하려면 triggerSave() API를 사용해야합니다. 이것은 TinyMCE가 밑에있는 <textarea>을 에디터의 현재 값으로 즉시 업데이트하도록합니다.