Hello,
I have been trying to make JQuery Validation with TinyMCE and until
now I wasn't able to do this. I have 2 text areas converted to
TinyMCE. I am using:
$("#New").validate({
errorClass: "Error",
errorElement: "label",
errorPlacement: function(error, element) {
if (element.is(":textarea"))
error.insertAfter(element.next());
else {
error.insertAfter(element);
},
rules: {
Answer: {required: true},
Question: {required: true}
},
messages: {
Answer: {required: "Insert an answer"},
Question: {required: "Insert a question"}
}
});
Using this code does not even validate. The form is submited. If I
remove the errorReplacement part then it works but the error message
is out of place.
I tried many options but until now I wasn't able to make this work.
Any idea how to solve this?
Thanks,
Miguel
On Jun 24, 3:01 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]>
wrote:
> How about this:
>
> errorPlacement: function(error, element) {
> if (element.is(":textarea"))
> error.insertAfter(element.next());
> else {
> error.insertAfter(element);
>
> }
>
> Jörn
>
> On Tue, Jun 24, 2008 at 2:18 PM, shapper <[EMAIL PROTECTED]> wrote:
>
> > Hello,
>
> > I checked the markup used by TinyMCE and it is something as follows:
>
> > <label for="Question">Question</label>
> > <textarea id="Question" cols="20" rows="10" name="Question"
> > style="display: none;"/>
> > <span id="Question_parent" class="mceEditor BonsAlunosSkin">
> > <table id="Question_tbl" class="mceLayout" cellspacing="0"
> > cellpadding="0" style="width: 538px; height: 175px;">
> > <tbody>
> > .....
> > </tbody>
> > </table>
> > </span>
>
> > So the textarea is disabled and replaced by a span and table ...
>
> > I then changed my validation code to:
>
> > $("#New").validate({
> > errorClass: "Error",
> > errorElement: "label",
> > rules: {Question: {required: true}},
> > errorPlacement: function(error, element) {
> > if (element.is(":textarea"))
> > error.appendTo(element.parent().next().next('textarea'));
> > }
> > });
>
> > This is not working. Could you, please, tell me what am I doing wrong?
> > I also tried with table but no success.
>
> > On Jun 23, 9:57 am, "Jörn Zaefferer" <[EMAIL PROTECTED]>
> > wrote:
> >> Most likely TinyMCE creates a new element and places it after the
> >> textarea, hiding the former. Use the errorPlacement-option to
> >> customize the placement for that case.
>
> >> Jörn
>
> >> On Mon, Jun 23, 2008 at 1:54 AM, shapper <[EMAIL PROTECTED]> wrote:
>
> >> > Hello,
>
> >> > I have the following rules:
>
> >> > $("#New").validate({
> >> > errorClass: "Error",
> >> > errorElement: "label",
> >> > rules: {Answer: {required: true}},
> >> > });
>
> >> > Applied to text area:
>
> >> > <label for="Answer" class="Required">Resposta</label>
> >> > <textarea name="Answer" rows="10" cols="20" id="Answer"></
> >> > textarea>
>
> >> > This works fine. The error labels shows after the TextArea.
> >> > The moment I use TinyMCE (http://tinymce.moxiecode.com/) to make the
> >> > Text Area an HTML WYSIWYG editor I get a problem:
>
> >> > The error label shows before the text area and after the label!
>
> >> > Any idea what might be wrong? How can I solve this?
>
> >> > Thanks,
> >> > Miguel
