부트 스트랩 노드 유효성 검사 플러그인 및 Iframs

iframe 요소를 만드는 내 양식에 bootstrap-wysihtml5 편집기를 사용하고 있습니다.부트 스트랩 노드 유효성 검사 플러그인 및 Iframs

<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" name="for_nod" src="#" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px 0px 10px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; -moz-box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px 4px 4px 4px; width: 750px; height: 300px;"> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <link href="/js/plug-ins/bootstrap-wysihtml5/rtl/rtl-editor.css" rel="stylesheet"> 
    <style type="text/css"> 
    </head> 
    <body class="wysihtml5-editor" contenteditable="true" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: text; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: optimizelegibility; word-break: normal; word-wrap: break-word; word-spacing: 0px;"> 
     simple text 
     <br> 
    </body> 
</html> 
</iframe>

NAD 유효성 검사 플러그인을 사용하여 iframe 내부의 body 요소가 비어 있지 않은지 확인해야합니다.

문제는 Nod 유효성 검사 플러그인이 jquery 선택기 TEXT 요소에 대한 유효성 검사 규칙을 설정하는 것을 허용한다는 것입니다. $ ("iframe")을 사용하여 iframe 객체를 가져올 수 있습니다. content(). find ("body")하지만 유효성 검증 로직이 작동하지 않습니다.

내가 수동으로 iframe을의 유효성 검사를 처리하기 위해 버튼을 온 클릭을 이벤트 핸들러를 제출 설정하려고 한 문제는 고개를 끄덕에 의해 사용되는 규칙이 통과하면 사실 반환하는 경우, 다음 지정 유효성 검사 기능이 적용되지 않습니다이었다 또는 거짓 값.

어쨌든이 문제를 해결하려면?

출처

2013-11-02 Samih A

나는 표시되지 않은 텍스트 영역 요소를 만든 다음 사용자 정의 이벤트 기능을 사용하여 iframe 본문의 이벤트 변경 내용을 수신하고 숨겨진 텍스트 영역 내용을 동일하게 동일하게 풀어서 문제를 해결했습니다. nod 규칙이 숨겨진 텍스트 영역에 적용되었습니다.

이것이 완벽한 해결책인지 확실하지 않지만 선택의 여지가 없습니다.

사용자 정의 contentchange 이벤트 코드

/* 
* custom-change-event 
* 
* This custom event is used for those elements 
* that has no support for default change event 
* like : body , div ,span, .... 
* 
* 
*/ 

    var interval; 

    jQuery.fn.contentchange = function (fn) { 
     return this.on('contentchange', fn); 
    }; 

    jQuery.event.special.contentchange = { 
     setup: function (data, namespaces, eventHandle) { 
      var self = this, 
       $this = $(this), 
       $originalContent = $this.text(); 
      interval = setInterval(function() { 
       if ($originalContent != $this.text()) { 
        $originalContent = $this.text(); 
        jQuery.event.special.contentchange.handler.call(self); 
       } 
      }, 500); 
     }, 
     teardown: function (namespaces) { 
      clearInterval(interval); 
     }, 
     handler: function (event) { 
      $(this).trigger('contentchange'); 
     } 
    };

출처

2013-11-05 19:28:22

부트 스트랩 노드 유효성 검사 플러그인 및 Iframs

답변

관련 문제