jQuery Validation plugin and custom input

Question

I am using this plugin to validate a form. One of the problems I am having is that one of the text fields is a BBCode plugin, so nothing happens to that field when it is validated.

The textarea under where it says Write the body of your tutorial uses a bbcode plugin which adds a bunch of HTML and a seperate input box that you have to use this code to get the value

$('textarea.bbcode').sceditor('instance').val();

So Ideally I need to figure out how to connect that up to the jQuery Form Validator

Here's my code:

    $("#creation-form").validate({
        rules: {
            title: {
                required: true,
                maxlength: 100,
                minlength: 10
            },
            category: "required",
            body: {
                required: true,
            },
            tags: "required"
        },
        messages: {
            title: 'Please enter the title of your tutorial'
        },
        errorElement: 'div',
        errorPlacement: function(error, element)
        {
            error.addClass('form-error');
            error.insertAfter(element);
        }
    })

And the HTML form:

            <form method="post" action="" enctype="multipart/form-data" id="creation-form">

                @if(Content::hasContent('upload_tutorial'))
                    <div class="alert alert-info">
                        {{ Content::getContent('upload_tutorial') }}
                    </div>
                @endif

                @if(FormResponse::has())
                    <div class="box-wrapper">
                        <div class="box-content">
                            {{ FormResponse::get() }}
                        </div>
                    </div>
                @endif
                <div class="margin-bottom"></div>

                <p>Tutorial Title</p>
                <p><input type="text" name="title" class="form-control" maxlength="100" value="{{ $upload->title or "" }}"></p>

                <p>&nbsp;</p>
                <p>Tutorial Category</p>
                <p><select name="category" class="form-control">
                        <option value="" selected>Select a category</option>
                        @foreach(TutorialCategory::all() as $tut)
                            @if(isset($upload->category) && $upload->category == $tut->name)
                                <option value="{{ $tut->name }}">{{ $tut->name }}</option>
                            @else
                                <option value="{{ $tut->name }}" checked>{{ $tut->name }}</option>
                            @endif
                        @endforeach
                    </select></p>

                <p>&nbsp;</p>

                <p>Write the body of your tutorial</p>
                <p><textarea name="body" class="bbcode">{{ $upload->body or "" }}</textarea></p>

                <p>&nbsp;</p>

                <p>Add tags</p>
                <input type="text" name="tags" id="tagField" class="form-control" value="{{ $upload->tags or "" }}">
                <ul id="tags"></ul>
                <p><b>Tags:</b>
                    @foreach(Tag::getTagsArray('tutorial') as $k => $tagName)
                        <span class="tag-name">{{ $tagName}}</span>
                    @endforeach
                </p>

                <p>&nbsp;</p>

                <p>Select a picture</p>
                <p><input type="file" name="picture" class="form-control"></p>

                @if($upload != null && $upload->hasPicture())
                    <p>&nbsp;</p>
                    <img src="{{ $upload->getThumbnail() }}" style="max-height:150px">
                @endif

                <p>&nbsp;</p>
                <button class="btn">Upload Tutorial</button>

            </form>

Answer 1

I created this solution. Because the bbcode textarea is not recognized, so I decided to create an input to check the textarea . Here is the source code .

In the HTML I added this line:

 <p><input class="form-control" id="texthidenid" name="texthiden" type="text" value=""></p>

And this is the JavaScrtip:

$(function() {
  // Replace all textarea tags with SCEditor
  $('textarea').sceditor({
    plugins: 'bbcode'
  });

  $("#creation-form").validate({
    rules: {
      title: {
        required: true,
        maxlength: 100,
        minlength: 10
      },
      category: "required",
      texthiden: {
        required: true,
        depends: function(element) {
          validateTextarea();
          return $('textarea').sceditor('instance').val() !== '';
        }
      },
      picture: "required"
    },
    messages: {
      title: 'Please enter the title of your tutorial',
      picture: 'Please enter the picture of your tutorial'
    },
    errorElement: 'div',
    errorPlacement: function(error, element) {
      error.addClass('form-error');
      error.insertAfter(element);
    }
  })

  function validateTextarea() {
    var data = $('textarea').sceditor('instance').val();
    if (data) {
      var x = document.getElementById("texthidenid").value = data;
      console.log(data);
    }
  }
});