2010-04-13 6 views
10

Ho un problema con l'editor TinyMCE. Ho una forma con pochi campi di testo e textarea (tinymce) e abilitato la validazione del client. Quando faccio clic su Salva convalida pulsante si verifica su tutti i campi di testo, ma richiede 2 clic per convalidare il contenuto di stagno. Inoltre, la convalida mostra il messaggio solo quando il campo è vuoto, o se la condizione non è soddisfatta (solo per le cause del test, è possibile inserire un massimo di 5 caratteri), ma quando inserisco il giusto numero di caratteri (meno di 5), il messaggio di errore rimane.Problema di convalida del client TinyMCE

Ecco esempio di codice:

<%Html.EnableClientValidation(); %> 
    <%= Html.ValidationSummary(true, "Na stranici postoje greške.", new { @style = "color: red;" })%></p> 
    <% using (Html.BeginForm("Create", "Article", FormMethod.Post, new { enctype = "multipart/form-data" })) 
     { %> 
    <fieldset> 
     <legend>Podaci za Aranžman</legend> 
      <label class="EditLabel" for="name"> 
       Opis</label> 
      <br /> 
      <%= Html.TextAreaFor(Model => Model.Description, new { style = "width: 100%; height: 350px;", @class = "tinymce" })%> 
      <%= Html.ValidationMessageFor(Model => Model.Description, "", new { @style = "color: red;" })%> 
     <p> 
      <input type="submit" value="Sačuvaj aranžman" /> 
     </p> 
    </fieldset> 
    <% } %> 

e la proprietà

[Required(ErrorMessage = "Unesi opis")] 
    [StringLength(5, ErrorMessage = "Opis mora imati manje od 5 znakova")] 
    public string Description { get; set; } 

Qualche suggerimento ???

risposta

26

La ragione di questo è che la maggior parte degli editor di testo RTF (inclusa la piccola MCE) non utilizza l'area di testo. Invece ha il proprio input e copia solo il testo quando il modulo viene inviato. Quindi il campo che stai convalidando non cambia in realtà quando scrivi qualcosa nell'editor.

Quello che dovrai fare è creare un aggeggio per questo che copia il testo dall'editor nell'area di testo quando fai clic sul pulsante di invio. Questo può essere fatto in questo modo:

$('#mySubmitButton').click(function() { 
    tinyMCE.triggerSave(); 
}); 
+1

Ciao Mattias, grazie per la risposta, benche ho provato questa soluzione prima ancora di inviare la domanda, e ha funzionato per il problema di clic. Ma il mio messaggio di errore è apparso anche quando inserisco il numero corretto di caratteri (meno di cinque). E ho capito perché, ho completamente dimenticato i tag HTML che sono stati aggiunti dall'editor. Anche se ho digitato solo un carattere, la mia condizione non è stata soddisfatta a causa dei tag aggiuntivi. Errore stupido :) La tua risposta è corretta, grazie ancora –

+0

+1 Molto utile, grazie. Stava avendo lo stesso problema. – TheCarver

1

Se hai lo stesso problema come TinyMCE richiesto la convalida non è fuoco sulla forma presentare il tempo ho una soluzione di questo tipo, so che questo non è il modo corretto, ma funzionano bene vedere il sottostante codice installare il pacchetto jquery tynymce nell'applicazione

QUESTO E 'MODELLO

[Required(ErrorMessage = "Please enter About Company")] 
[Display(Name = "About Company : ")] 
[UIHint("tinymce_jquery_full"), AllowHtml] 
public string txtAboutCompany { get; set; } 

ora nel file di cshtml significa a nostro avviso

012.
<div class="divclass"> 
    @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" }) 
    @Html.EditorFor(model => model.txtAboutCompany) 
    <span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span> 
</div> 

e sul pulsante di invio evento Click controllare questo jQuery

$("#BusinessProfile").click(function() { 
     var aboutC = $("#txtAboutCompany").val() 
     var pinfo = $("#txtProductinfo").val(); 
     if (aboutC == "" && pinfo == "") { 
      $("#AC").append("").val("").html("Please enter about company") 
      $("#PI").append("").val("").html("Please enter product information") 
      $("#bpform").valid(); 
      return false; 
     } else if (aboutC == "") { 
      $("#PI").append("").val("").html("") 
      $("#AC").append("").val("").html("Please enter about company") 
      $("#txtAboutCompany").focus(); 
      $("#bpform").valid(); 
      return false; 
     } else if (pinfo == "") { 
      $("#AC").append("").val("").html("") 
      $("#PI").append("").val("").html("Please enter product information") 
      $("#txtProductinfo").focus(); 
      $("#bpform").valid(); 
      return false; 
     } 
     else { 
      $("#AC").append("").val("").html(""); 
      $("#PI").append("").val("").html(""); 
      //return true; 
      $("#bpform").validate(); 
     } 
    }); 

provare questo codice,