[英]jQuery Validation plugin and custom input
我正在使用此插件來驗證表單。 我遇到的問題之一是文本字段之一是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> </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> </p>
<p>Write the body of your tutorial</p>
<p><textarea name="body" class="bbcode">{{ $upload->body or "" }}</textarea></p>
<p> </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> </p>
<p>Select a picture</p>
<p><input type="file" name="picture" class="form-control"></p>
@if($upload != null && $upload->hasPicture())
<p> </p>
<img src="{{ $upload->getThumbnail() }}" style="max-height:150px">
@endif
<p> </p>
<button class="btn">Upload Tutorial</button>
</form>
我創建了這個解決方案。 因為無法識別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);
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.