Impossibile convalidare TinyMCE in asp mvc

Question

Ho un modulo che utilizza la convalida non invadente. Recentemente ho cambiato area di testo per usare tiny mce e ora la validazione non funziona.
Ho provato a utilizzare la soluzione da here ma non succede nulla.

$('#form input[type=submit]').click(function() { 

Non esegue mai. Ecco quello che ho:

@using (Html.BeginForm("Create", "UserAd", FormMethod.Post)) 
{ 
... 
@Html.TextAreaFor(x => x.Description, new { id = "description" })   
... 
<input type="submit" value="Create"/> 
... 

Questo è il codice JS:

$(document).ready(function() { 

     tinyMCE.init({ 
      mode: "textareas", 
      theme: "advanced", 
      skin: "o2k7", 
      height: "250", 
      plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 


      theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist", 
      theme_advanced_buttons2: "", 
      theme_advanced_buttons3: "", 
      theme_advanced_buttons4: "", 
      theme_advanced_toolbar_location: "top", 
      theme_advanced_toolbar_align: "left", 
      theme_advanced_resizing: false 
     }); 

     function toggleEditor(id) { 
      if (!tinyMCE.get(id)) { 
       tinyMCE.execCommand('mceAddControl', false, id); 
      } 
      else { 
       tinyMCE.execCommand('mceRemoveControl', false, id); 
      } 
     } 


     // new 
     $(function() { 
      var tinymce = $('#Description'); 

      tinymce.tinymce({ 
       setup: function (e) { 
        e.onInit.add(function() { 
         tinymce.css({ 
          position: 'absolute', 
          height: 0, 
          width: 0, 
          top: -100 
         }).show(); 
        }); 
       } 
      }); 

      $('#form input[type=submit]').click(function() { 
       alert('ss'); 
       tinyMCE.triggerSave(); 
      }); 
     }); 
     // makes form field highlighting work with bootstrap's css 
     $.validator.setDefaults({ 
      highlight: function (element, errorClass, validClass) { 
       $(element).closest('.control-group').addClass('error'); 
      }, 
      unhighlight: function (element, errorClass, validClass) { 
       $(element).closest('.control-group').removeClass('error'); 
      } 

     }); 
     $(function() { 
      // makes form field highlighting work with bootstrap's css on post backs 
      $('.input-validation-error').each(function (i, element) { 
       $(element).closest('.control-group').not('.error').addClass('error'); 
      }); 
     }); 

Answer 1

si specifica un ID di "#form" nel selettore. Prova a rimuovere il # dal tuo selettore.

per esempio,

$('form input[type=submit]').click(function() { 
     alert('ss'); 
     tinyMCE.triggerSave(); 
}); 

Inoltre, se sto leggendo il codice giusto, il TinyMCE è un elemento dinamico. Potresti voler associare l'evento click con la funzione on.

per esempio,

$("body").on("click","#yourFormID", function(e){ 
    your click stuff here 
} 

Answer 2

L'errore che si ottiene è esattamente quello che dice. Devi caricare Tiny MCE (non il plugin, il vero affare) prima di jQuery. Questo potrebbe essere il problema.

È possibile verificare se tiny_mce.js è stato effettivamente scaricato? Potresti anche voler controllare this blog. È da parte di qualcuno che ha avuto problemi con Tiny MCE.

Answer 3

Poiché TextArea viene nascosto dopo aver applicato il plugin tinyMce e poiché i campi nascosti predefiniti non sono convalidati, è necessario modificare questo valore predefinito. Hai già provato ad aggiungere:

$.validator.setDefaults({ 
ignore: '' 

});

Answer 4

Esistono diverse domande StackOverflow per questo problema che risolveranno questo problema. Date un'occhiata qui

• Jquery validation form with TinyMCE field who gives no error by empty value
• validating multiple TinyMCE Editor