La validation de Jquery ne fonctionne pas avec ckeditor

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

  
 
  
 Submit  

Comme j’ai trouvé cette réponse ici

Merci à tous…

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 de 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 je tire de cette réponse à une question différente mais similaire.

L’autre erreur que vous avez est mal orthographier minlength dans votre object de règles.

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

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

J’ai constaté 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 pousse le contenu dans la zone de texte. Ce qui signifie que la validation sur TextArea est déclenchée sur des données obsolètes. Pour résoudre ce problème, je mets à jour mon TextArea sur le 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(); }); } 

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

   $("#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 .

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

Le formulaire n’est valide que quand est soumis.

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

Les réponses existantes sont bonnes, elles fournissent des solutions de validation uniquement sur le bouton d’envoi , ici un code pour la validation réactive des champs 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(); sortingggerElementChangeAndJqueryValidation($(intance.element.$)); } function sortingggerElementChangeAndJqueryValidation(element) { element.sortinggger('keyup'); } 

Bonus : si vous utilisez des boutons et des gestionnaires de soumission personnalisés pour votre formulaire, vous n’avez plus besoin d’appeler explicitement CKEDITOR.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.

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!!!

Le champ Bydefault Ckeditor n’est pas validé à l’aide de la règle requirejse. 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.sortingm ( CKEDITOR.instances[idname].getData() ); return !params || messageLength.length !== 0; }, "Image field is required"); 

Et surtout vide le tableau ignore –

Maintenant vous êtes tous ensemble.