jQuery驗證插件和自定義輸入

Question

我正在使用此plugin來驗證表單。我遇到的其中一個問題是其中一個文本字段是BBCode插件，因此在驗證該字段時沒有任何反應。

下，它說：Write the body of your tutorial使用設置高亮插件，它增加了大量HTML和一個單獨的輸入框，你必須使用此代碼來獲取值

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

所以，理想情況下，我需要圖中的文字區域如何連接到jQuery的表單驗證

這裏是我的代碼：

$("#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。 Here is the source code。

在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); 
    } 
    } 
});