How to use Jquery.Validate plugin with a iframe?

Question

I have a Rich Html editor called JhtmlArea and it makes a Iframe over a textarea. I have a validation set on this textarea but since JhtmlArea makes a Iframe it hides the textarea and nothing is every inserted in this.

So my validation will never fire. So how can I validate a iframe with jquery.validate?

http://jhtmlarea.codeplex.com/

Answer 1

Do you want to validate if the user left the textarea blank? I suppose so.

You have two ways to do IMO. I'm speculating that you're going to have a "submit" button, so in this scenarion:

• You could copy each key event that goes into the iframe to the textarea, so clicking the submit button is like you were writing directly in the textarea; (beware of performance)
• Call a method that copies the iframe content to the textarea immediately after you clicked the submit button.

I haven't checked your app source, so I dont know if an iframe is really the best approach.

Answer 2

Put the another hidden text field in the existing form

like this

<input type="text" name="txt_field" id="txt_field" class="validate[required]" value="" style="display:none;"/>

this would be the part of the form

so apply validation on this field which has linked to the iframe

you just have to set its value on basis of the content in the iframe

if iframe has some content then set the value of hidden text field and if content in the iframe is blank then set it null

$("#form_id").validationEngine({'custom_error_messages': {
            '#txt_field': {
                'required': {
                    'message': "validation message goes here"
                }
            }
    }
});


    $('#form_submit_btn').click(function() {
            var message = $.trim($("#iframe_id").contents().find("body").text());
            if (message != '') {
                $("#txt_field").val($("#iframe_id").contents().find("body").html());
            }
            else{
                $("#txt_field").val('');
            }
    });