Our project uses bootstrapValidator for front-end verification, but there is a UEditor in the form. It has no effect when using bootstrapValidator. For the sake of unified page style, just modify and modify it.
First, let's take a look at the modified effect
The UEditor above needs to be adjusted to this point. First, let’s write the basic structure first.
<form style="padding-top:15px;width:100%" id="defaultForm"> <div> <label id="labelId" style="font-weight:normal;"> UEditor test</label> <div id="divId"> <script id="UEId" type="text/plain"></script> <input type="text" id="inputId" name="inputName" style="height:0px;border:0px;margin:0px;padding:0px" /> </div> </div> <div> <button type="submit" id="btn_save">Save</button> </div> </form>
Pay special attention, I added a text box behind the UEditor. The purpose of this text box is to store the content of the UEditor. Since your UEditor cannot use bootstrapValidator for verification, I will add a text box that can be used for verification, and then hide the input using style="height:0px;border:0px;margin:0px;padding:0px;" method. Pay special attention that it cannot be hidden with display:none, so the verification will be hidden together.
Then it will not work now. Let's add verification of the text box content now.
$('#defaultForm').bootstrapValidator({ message: 'Verification failed', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: 'Submitted data cannot be empty', validators: { notEmpty: { // Non-empty message: 'The filled in data cannot be empty' }, } }, } }).on('success.form.bv', function (e) { e.preventDefault(); var $form = $(e.target); var bv = $form.data('bootstrapValidator'); //Submit the form $.post('address', { data: "data" }, function (result) { alert(result); }); });Let's try it, it really doesn't work, because our UEditor and hidden text content have not been synchronized yet, and it should be synchronized when we enter the content in the UEditor!
So do we synchronize in the contentChange event of UEditor? ?
It seems that there is no problem at first, but you will find that these special symbols such as *&%￥ will not trigger the contentChange event when inputting.
It’s embarrassing now, let’s continue to solve it!
Here we need to solve two problems, one is the contentChange event, the problem that special symbols cannot be triggered, and the problem of assignment and re-verification.
First, look at the first problem that special symbols cannot be triggered. Let’s first look at what UEditor looks like after it is generated.
An iframe was found here. It seems that the content of UEditor is hidden here. As long as you listen to the content changes events in it, the first problem should be solved.
There is another second question, just upload the code
editor = UE.getEditor("UEId", { initialFrameHeight: 40 }).ready(function () { var editor = UE.getEditor("UEId"); /* Find the iframe of UEditor*/ var contents = $('#UEId').find('iframe').contents(); var fn = function () { $("#inputId").val(UE.getEditor("UEId").getContent()); $('#defaultForm').data('bootstrapValidator')//Revalidate inputName .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); } if (document.all) {//document.all recognizes whether it is true under IE and under IE contents.get(0).attachEvent('onpropertychange', function (e) { fn(); }); } else { contents.on('input', fn); } });After assignment, we must use the updateStatus and validateField method of bootstrapValidator to re-verify it, and then let's try again.
If you look closely, there are three problems inside. One is that the border does not change color together. The second is that there is no icon with √ and × on the right. The third is that the direct point save does not trigger verification.
OK, let’s solve it one by one! First, why didn’t the border change color? Actually, it is normal, because we are verifying a hidden text box. If the color changes, it should be the text box.
OK, then we will add a piece of js and make the border color the same as the left label color, so add a piece of code after each re-verification of UEditor
$($('#UEId div')[0]).css('border-color', $('#labelId').css('color'));
The second problem is to let √× display it. This is a bit troublesome. I adjusted the style bit by bit. Finally, I found a solution. Find the .edui-default .edui-editor class in the ueditor.css file and change its position to position: initial; then adjust its margin-top to the same as the toolbar in the ready method of UEditor.
var margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height();
$($('#divId i')[0]).css('margin-top', margintop);
The last one is best solved, just add such a piece of code to form submit
$('#defaultForm').submit(function () { $('#defaultForm').data('bootstrapValidator') .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName');$($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); })Finally, we can see the final effect, and when we submit the form, we can directly take the val() of the text box, and we don't want to add an extra judgment if (it's UEditor) {....}. Finally, the entire html content is attached
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Scripts/bootstrap.css" rel="stylesheet" /> <link href="bootstrapValidator.min.css" rel="stylesheet" /> <style> .form-control-feedback { margin-right: 10px; } </style></head><body> <form style="padding-top:15px;width:100%" id="defaultForm"> <div> <label id="labelId" style="font-weight:normal;"> UEditor test</label> <div id="divId"> <script id="UEId" type="text/plain"></script> <input type="text" id="inputId" name="inputName" style="height:0px;border:0px;margin:0px;padding:0px" /> </div> </div> <div> <button type="submit" id="btn_save">Save</button> </div> </form></body></html><script src="jquery-1.9.1.min.js"></script><script src="Scripts/bootstrap.min.js"></script><script src="bootstrapValidator.min.js"></script><script src="UEeditor/ueditor.config.js"></script><script src="UEeditor/ueditor.all.min.js"></script><script src="zh_CN.js"></script><script src="UEeditor/lang/zh-cn/zh-cn.js"></script><script type="text/javascript"> $(function () { editor = UE.getEditor("UEId", { initialFrameHeight: 40 }).ready(function () { var editor = UE.getEditor("UEId"); /*Finding the iframe of UEditor*/ var margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height(); $($('#divId i')[0]).css('margin-top', margintop); var contents = $('#UEId').find('iframe').contents(); var fn = function () { $("#inputId").val(UE.getEditor("UEId").getContent()); $('#defaultForm').data('bootstrapValidator')//Revalidate inputName .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); } if (document.all) {//document.all recognizes whether it is true under IE and under IE contents.get(0).attachEvent('onpropertychange', function (e) { fn(); }); } else { contents.on('input', fn); } }); $('#defaultForm').submit(function () { $('#defaultForm').data('bootstrapValidator') .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); }) $('#defaultForm').bootstrapValidator({ message: 'Verification failed', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: 'The submitted data cannot be empty', validators: { notEmpty: { // Non-empty message: 'The filled-in data cannot be empty' }, } }, } }).on('success.form.bv', function (e) { e.preventDefault(); var $form = $(e.target); var bv = $form.data('bootstrapValidator'); // Submit the form $.post('address', { data: "data" }, function (result) { alert(result); }); })</script>Remember to add some bootstraps and jquery to the ones you use.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.