2010-04-13 4 views
10

Ich habe ein Problem mit TinyMCE-Editor. Ich habe Formular mit wenigen Textfeldern und Textarea (tinymce), und ermöglichte Client-Validierung. Wenn ich auf "Speichern" klicke, erscheint die Validierung in allen Textfeldern, aber es dauert 2 Klicks, um den Inhalt zu bestätigen. Darüber hinaus zeigt die Validierung eine Nachricht nur an, wenn das Feld leer ist oder wenn die Bedingung nicht erfüllt ist (nur für Testursachen können maximal 5 Zeichen eingegeben werden), aber wenn ich die richtige Anzahl von Zeichen (weniger als 5) eingabe, bleibt die Fehlermeldung.TinyMCE-Client Validierungsproblem

Hier Codebeispiel:

<%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> 
    <% } %> 

und die Eigenschaft

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

Irgendwelche Vorschläge ???

Antwort

26

Der Grund dafür ist, dass die meisten Rich-Text-Editoren (einschließlich winzige MCE) nicht den Textbereich verwenden. Stattdessen hat es eigene Eingaben und kopiert nur den Text, wenn das Formular abgeschickt wird. Das Feld, das Sie validieren, ändert sich also nicht, wenn Sie etwas im Editor eingeben.

Was Sie tun müssen, ist eine Arbeit für diese erstellen, die den Text aus dem Editor in den Textbereich kopiert, wenn Sie auf die Schaltfläche Senden klicken. Dies kann wie folgt geschehen:

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

Hallo Mattias, danke für Antwort, altough ich diese Lösung habe versucht, bevor auch die Frage der Veröffentlichung, und es arbeitete für das Klickproblem. Aber meine Fehlermeldung erschien auch, wenn ich die richtige Anzahl von Zeichen (weniger als fünf) eingab. Und ich fand heraus, warum, ich komplett vergessen HTML-Tags, die von Editor hinzugefügt wurden. Selbst wenn ich nur ein Zeichen eintippte, wurde meine Bedingung wegen der zusätzlichen Tags nicht erfüllt. Dummer Fehler :) Immer noch Ihre Antwort ist richtig, danke nochmal –

+0

+1 Sehr nützlich, danke. Hatte das gleiche Problem. – TheCarver

1

Wenn Sie gleiche Problem haben wie TinyMCE Validierung erforderlich ist, nicht auf Form Feuer Zeit vorlegen Ich habe eine Lösung wie diese, ich weiß, das ist nicht die richtige Art und Weise, aber es funktionieren sehen die Code unten tynymce jquery Paket in Ihrer Anwendung

DIES IST MODELL

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

jetzt in cshtml Datei bedeutet aus unserer Sicht installieren

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

und auf die Schaltfläche Click-Ereignis aktivieren Sie dieses 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(); 
     } 
    }); 

versuchen diesen Code einreichen,