TinyMCE客户端验证问题

时间:2010-04-13 11:13:01

标签: asp.net-mvc validation tinymce client-side

我对TinyMCE编辑器有疑问。我有几个文本字段和textarea(tinymce)的表单,并启用了客户端验证。当我单击保存按钮验证在所有文本字段上发生,但它需要2次单击以验证tinymce内容。此外,验证仅在字段为空时显示消息,或者如果条件不满足(仅针对测试原因,可以输入最多5个字符),但是当我输入正确的字符数(少于5个)时,错误消息将保留。

这是代码示例:

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

和属性

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

任何建议???

2 个答案:

答案 0 :(得分:27)

这背后的原因是大多数富文本编辑器(包括微小的mce)不使用文本区域。相反,它有自己的输入,只在提交表单时复制文本。因此,当您在编辑器中键入内容时,您正在验证的字段实际上不会更改。

您需要做的就是为此创建一个解决方法,当您单击提交按钮时,将文本从编辑器复制到文本区域。这可以这样做:

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

答案 1 :(得分:1)

如果你有相同的问题,如Tinymce要求验证不是表格提交时间,我有一个这样的解决方案,我知道这是不正确的方式,但它工作正常,请参阅下面的代码 在你的应用程序中安装tynymce jquery包

这是模型

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

现在在cshtml文件中意味着在我们的视图中

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

并在提交按钮点击事件检查此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();
        }
    });

试试这段代码,