[英]How to validate wysiwyg editor using bootstrap validation
運用
bootstrap3-wysihtml5-bower 2013-11-22(所見即所得編輯器)
和
BootstrapValidator v0.5.2
使用引導程序驗證來驗證textarea(bootstrap-wysihtml5編輯器)。 只需檢查NotEmpty和Max Characters然后提交表單。
到目前為止嘗試過
$('#setpolicyform').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, ignore: ":hidden:not(textarea)", fields: { policyta: { group: '.lnbrd', validators: { notEmpty: { message: 'Textarea cannot be empty' } } } } }).on('success.form.bv', function(e) { e.preventDefault(); var $form = $("#setpolicyform"), $url = $form.attr('action'); $.post($url, $form.serialize()).done(function(dte) { $("#policy-content").html(dte); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form role="form" method="POST" action="self.php" name="setpolicyform" id="setpolicyform"> <div class='box-body pad'> <div class="form-group"> <div class="lnbrd"> <textarea class="form-control textarea" name="policyta" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea> </div> </div> </div> <div class="box-footer clearfix"> <button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn"><i class="fa fa-save"></i> SAVE</button> </div> </form>
伙計們,bootstrapValidator已升級為formValidation。 如果您使用的是formValidation的更新版本,則可以這樣做,而不是添加單獨的類來隱藏文本區域:
$('#setpolicyform').formValidation({
framework: 'bootstrap',
excluded: [':disabled'], /* This will do the trick of validating for notEmpty*/
icon : {
valid : '',
invalid : '',
validating : 'glyphicon glyphicon-refresh'
},
fields: {
policyta: {
group: '.lnbrd',
validators: {
notEmpty: {
message: 'Textarea cannot be empty'
},
stringLength: {
max: 50,
message: 'Maximum 50 Characters Required'
}
}
}
}
});
$('.textarea').wysihtml5({
events: {
change: function () {
$('#setpolicyform').formValidation('revalidateField', 'policyta');
}
}
});
謝謝
有一種方法可以驗證WYSIWYG Editor
,原因是bootstrapValidator
不對其進行驗證,因為在textarea name="policyta"
上初始化WYSIWYG Editor
后, bootstrapValidator
將隱藏並忽略它
因此,一種方法是不隱藏textarea
,只需設置z-index: -1
,它將位於WYSIWYG Editor
后面,請在初始化后使用WYSIWYG Editor
事件 load
來添加CSS,
CSS
.textnothide {
display: block !important;
position: absolute;
z-index: -1;
}
JS
$('.textarea').wysihtml5({
events: {
load: function () {
$('.textarea').addClass('textnothide');
}
}
});
現在,讓我們使用bootstrapValidator
驗證文本區域,並且您還要求Max Characters
限制
第一個bootstrapValidator
腳本
$('#setpolicyform').bootstrapValidator({
message: 'This value is not valid',
//ignore: ":hidden:not(textarea)", //<---- No Need of This
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
policyta: {
group: '.lnbrd',
validators: {
notEmpty: {
message: 'Textarea cannot be empty'
},
stringLength: { //<- Limit Maximum Character(s)
max: 50,
message: 'Maximum 50 Characters Required'
}
}
}
}
});
現在,讓我們使用bootstrapValidator
檢查並驗證textarea,需要再次change
wysihtml5
事件以檢查更改並重新驗證
change: function () {
$('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
}
因此,最終腳本將是
$(document).ready(function () {
$('#setpolicyform').bootstrapValidator({
message: 'This value is not valid'
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
policyta: {
group: '.lnbrd',
validators: {
notEmpty: {
message: 'Textarea cannot be empty'
},
stringLength: {
max: 50,
message: 'Maximum 50 Characters Required'
}
}
}
}
});
$('.textarea').wysihtml5({
events: {
load: function () {
$('.textarea').addClass('textnothide');
},
change: function () {
$('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
}
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.