如何使用 bootstrap 验证来验证所见即所得编辑器
How to validate wysiwyg editor using bootstrap validation
使用
bootstrap3-wysihtml5-bower 2013-11-22 (WYSIWYG Editor)
和
BootstrapValidator v0.5.2
使用 bootstrap 验证验证文本区域(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>
有一种方法可以验证 WYSIWYG Editor
,原因 bootstrapValidator
不验证它是因为在 textarea name="policyta"
上初始化 WYSIWYG Editor
后,它将被隐藏并被忽略bootstrapValidator
所以一种方法是不要隐藏 textarea
,只需设置 z-index: -1
,它就会在 WYSIWYG Editor
后面,使用 WYSIWYG Editor
event 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
检查和验证文本区域,需要另一个 wysihtml5
事件 change
来检查更改并重新验证
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');
}
}
});
});
各位,bootstrapValidator 已升级为 formValidation。如果您使用的是 formValidation 的更新版本,您可以这样做而不是添加单独的 class 来隐藏文本区域:
$('#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');
}
}
});
谢谢
使用
bootstrap3-wysihtml5-bower 2013-11-22 (WYSIWYG Editor)
和
BootstrapValidator v0.5.2
使用 bootstrap 验证验证文本区域(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>
有一种方法可以验证 WYSIWYG Editor
,原因 bootstrapValidator
不验证它是因为在 textarea name="policyta"
上初始化 WYSIWYG Editor
后,它将被隐藏并被忽略bootstrapValidator
所以一种方法是不要隐藏 textarea
,只需设置 z-index: -1
,它就会在 WYSIWYG Editor
后面,使用 WYSIWYG Editor
event 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
检查和验证文本区域,需要另一个 wysihtml5
事件 change
来检查更改并重新验证
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');
}
}
});
});
各位,bootstrapValidator 已升级为 formValidation。如果您使用的是 formValidation 的更新版本,您可以这样做而不是添加单独的 class 来隐藏文本区域:
$('#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');
}
}
});
谢谢