web-dev-qa-db-fra.com

La validation de Jquery ne fonctionne pas avec ckeditor

J'utilise jQuery pour valider les formulaires. Mais lorsque j'utilise CKeditor et que je tente de le valider avec jQuery, cela ne fonctionne pas.

Voici l'extrait de code HTML

  <form class="form-horizontal" role="form" name="f3" id="f3" >
   <div class="col-xs-8">
       <textarea class="ckeditor" name="cktext" id="cktext"></textarea>
   </div>
    <button type="submit" class="btn btn-default btn-success">Submit</button>
  </form>

Voici le code de validation du formulaire

    <script>
           $(document).ready(function(){
           $("#f3").validate(
            {
              debug: false,
                rules: { 
                    cktext:{

                     required:true,
                     minlenght:10
                    }
                 }
            });
        });
      </script>

FYI: la validation jQuery fonctionne pour d’autres champs de formulaire, attendez le ckeditor textarea filed

Toutes les suggestions .. pour se débarrasser de ce problème ..

jqueryjquery-validateckeditor
13
PHPCoder

Enfin, j'ai trouvé la réponse à ma question ...

J'ai changé la valeur de la propriété ignore qui, par défaut, est la suivante: valeur cachée. car CKEDITOR cache la validation textarea jQuery ne valide pas l'élément:

   ignore: []

Je viens de changer le script de validation comme suit ..

     $(document).ready(function(){

            $("#f3").validate(
            {
                ignore: [],
              debug: false,
                rules: { 

                    cktext:{
                         required: function() 
                        {
                         CKEDITOR.instances.cktext.updateElement();
                        },

                         minlength:10
                    }
                },
                messages:
                    {

                    cktext:{
                        required:"Please enter Text",
                        minlength:"Please enter 10 characters"


                    }
                }
            });
        });

Extrait HTML est

   <form class="form-horizontal" role="form" name="f3" id="f3" >
     <div class="col-xs-8">
        <textarea class="ckeditor" name="cktext" id="cktext"></textarea>
    </div>
     <button type="submit" class="btn btn-default btn-success">Submit</button>
   </form>

Comme j'ai trouvé cette réponse dans ici

Merci à tous...

26
PHPCoder

J'ai pris la réponse précédente et l'ai complétée avec un CKEditor, afin que vous puissiez voir ce qu'il faut faire pour copier le contenu de CKEditor dans votre textarea avant le soumettre.

Les éléments clés sont les suivants:

CKEDITOR.on('instanceReady', function () {
    $.each(CKEDITOR.instances, function (instance) {
        CKEDITOR.instances[instance].document.on("keyup", CK_jQ);
        CKEDITOR.instances[instance].document.on("paste", CK_jQ);
        CKEDITOR.instances[instance].document.on("keypress", CK_jQ);
        CKEDITOR.instances[instance].document.on("blur", CK_jQ);
        CKEDITOR.instances[instance].document.on("change", CK_jQ);
    });
});

function CK_jQ() {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}

Ce que j'ai obtenu de cette réponse à une question différente mais similaire.

L'autre erreur que vous avez est minlength mal orthographié dans votre objet de règles.

Voici à quoi ça ressemble de fonctionner: http://jsfiddle.net/ryleyb/QcJ57/

4
Ryley
jQuery.validator.setDefaults({
    ignore: [],
    // with this no hidden fields will be ignored E.g. ckEditor text-area
});

J'ai observé que la validation fonctionnait au 2e envoi. La raison en est que ckEditor masque la zone de texte réelle et place un iframe en tant qu'instance d'éditeur. Lors de la soumission, il place le contenu dans la zone de texte. Ce qui signifie que la validation sur la TextArea est déclenchée sur des données obsolètes. Pour résoudre ce problème, je mets à jour ma TextArea lors du changement de texte de l'instance de l'éditeur.

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].on('change', function ()
        {
            var editorName = $(this)[0].name;
            CKEDITOR.instances[editorName].updateElement();
        });
    }
2
Mukesh Bhojwani

nous pouvons valider ckeditor en utilisant la validation jquery en utilisant le code suivant.

<input type="text" name="firstname" id="firstname"/>
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>

$("#myForm").validate({
   ignore: [],

     rules:{
            firstname:{
            required:true
        },
    editor1: {
       required: function(textarea) {
       CKEDITOR.instances[textarea.id].updateElement();
       var editorcontent = textarea.value.replace(/<[^>]*>/gi, '');
       return editorcontent.length === 0;
     }
               }
     },messages:{
            firstname:{
            required:"Enter first name"
        }

     }
   });

pour plus d'informations sur la validation, cliquez ici http://www.dotnetqueries.com/Article/129/validate-ckeditor-using-jquery-form-validation .

1
DotNetLover

Vous devez mettre un bouton d'envoi dans votre formulaire:

<input type="submit"/>

Le formulaire n'est valide que quand est soumis.

Vérifiez l'exemple sur ce violon: http://jsfiddle.net/5RrGa/800/

0
Leonardo Delfino

Par défaut, le champ Ckeditor n'est pas validé à l'aide de la règle requise. Nous devons créer une méthode de validation personnalisée pour cela -

jQuery.validator.addMethod('ckrequired', function (value, element, params) {
    var idname = jQuery(element).attr('id');
    var messageLength =  jQuery.trim ( CKEDITOR.instances[idname].getData() );
    return !params  || messageLength.length !== 0;
}, "Image field is required");

Et surtout vide le tableau ignore - 

<script>
$(document).ready(function(){
    $("#f3").validate({
        ignore : [],
        rules: {
        cktext:{    
            ckrequired:true
        }
    }
            });
        });
      </script>

Maintenant vous êtes tous ensemble. 

0
aishwarya

Un simple extrait a fonctionné pour moi.

CKEDITOR.replace( 'textarea_input_name');

$( "#form_id" ).submit( function( e ) { 
     //in case, if didn't worked, remove below comment. This will get the textarea with current status
    //CKEDITOR.instances.textarea_input_name.updateElement( ); 
    var messageLength = CKEDITOR.instances['textarea_input_name'].getData( ).replace( /<[^>]*>/gi, '' ).length;
    if( !messageLength )
    {
        alert( 'Please fill required field `Text`' );
        //stop form to get submit
        e.preventDefault( );
        return false;
    }
    else
    {
        //editor is not empty, proceed to submit the form
        return true;
    }
} );

J'espère que cela t'aides!!!

0
Rohan Khude

Les réponses existantes sont bonnes, elles fournissent des solutions de validation uniquement sur le bouton d'envoi, ici du code pour validation réactive des champs de ckeditor, comme le fait la validation par défaut de jquery. Mettez ceci sur votre ckeditor/config.js:

CKEDITOR.on('instanceReady', function (e) {
    var instance = e.editor;
    instance.on("change", function (evt) {
        onCKEditorChange(evt.editor);
    });
    //key event handler is a hack, cause change event doesn't handle interaction with these keys 
    instance.on('key', function (evt) {
        var backSpaceKeyCode = 8;
        var deleteKeyCode = 46;
        if (evt.data.keyCode == backSpaceKeyCode || evt.data.keyCode == deleteKeyCode) {
            //timeout needed cause editor data will update after this event was fired
            setTimeout(function() {
                onCKEditorChange(evt.editor);
            }, 100);
        }
    });
    instance.on('mode', function () {
        if (this.mode == 'source') {
            var editable = instance.editable();
            editable.attachListener(editable, 'input', function (evt) {
                onCKEditorChange(instance);
            });
        }
    });
});

function onCKEditorChange(intance) {
    intance.updateElement();
    triggerElementChangeAndJqueryValidation($(intance.element.$));
}

function triggerElementChangeAndJqueryValidation(element) {
    element.trigger('keyup');
}

Bonus: Si vous utilisez des boutons et des gestionnaires de soumission personnalisés pour votre formulaire, maintenant vous n'avez pas besoin d'appeler explicitementCKEDITOR.instances["yourtextarea"].updateElement(); avant d'envoyer le formulaire via ajax à votre serveur.

Aussi, n'oubliez pas d'appeler:

jQuery.validator.setDefaults({
    ignore: []
});

Mon CKeditor: version: "4.5.4", révision: "d4677a3" Doc pour les événements ckeditor: http://docs.ckeditor.com/#!/api/CKEDITOR.editor . Il était difficile de trouver le bon document sur ce site.

0
shemanov