Jquery validation ' require ' is not working with html editor

Question

<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<link href="/CSS/jquery.wysiwyg.css" rel="stylesheet" type="text/css" />
<script src="/JS/jquery.wysiwyg.js" type="text/javascript"></script>
<script type="text/javascript" >
    $(document).ready(function () {
        $('#wysiwyg').wysiwyg()
    });   
</script>

<form id="form" action="example/foo" method="post">
    <textarea id="wysiwyg" name="question" class="required" rows="5" cols="10"> </textarea>
</form>

This is my code in which I am using an HTML editor. I put require validation and it works fine, but if I put only some spaces and submit my form jQuery assumes it is valid. On the other hand in the rest of my project jQuery is behaving normally.

How can I solve this?

Answer 1

If i got your question right, you are trying to validate the textbox for required attribute, Try adding the rules like

$("#wysiwyg").rules("add", { required: true,
messages: {
required: "This feild is required",
});

and try to validate using:

$("#commentForm").validate();

Answer 2

Try This

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > </script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
    <script>
    $(document).ready(function(){
            $('#form').validate();
    })
</script>
        <form id="form" action="example/foo" method="post">
    <textarea id="wysiwyg" name="question" class="required" rows="5" cols="10"></textarea>
    <input type="submit" value="sub">