jQuery验证插件和自定义输入

Question

我正在使用此插件来验证表单。 我遇到的问题之一是文本字段之一是BBCode插件，因此在验证该字段时没有任何反应。

文字Write the body of your tutorial下方，使用了bbcode插件，该插件添加了一堆HTML和一个单独的输入框，您必须使用此代码来获取值

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

所以理想情况下，我需要弄清楚如何将其连接到jQuery Form Validator

这是我的代码：

    $("#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);
        }
    })

和HTML表单：

            <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

我创建了这个解决方案。 因为无法识别bbcode textarea ，所以我决定创建一个input来检查textarea 。 这是源代码 。

在HTML中，我添加了以下行：

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

这是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);
    }
  }
});