如何使用jquery.validationEngine插件来验证CLEditor所见即所得的编辑器输入？我正在尝试使用引用的特定 jquery 插件验证表单提交时的 html 编辑器输入。
问问题
1863 次
2 回答
2
这是我想出的解决方案。您还可以从pastebin获取副本
<--如果有帮助，请投票。
// Include all the jquery, jquery ui, cleditor, and validation-engine CSS and javascript library files here
<script type="text/javascript">
// object used to store the validation states of any html editor textarea inputs used on the page
var editorStates = new Object();
// add one property/value for each textarea id that you are using on this page..
// in this example there are going to be three diferent editor inputs:
editorStates['your_textarea_id_1']=true;
editorStates['your_textarea_id_2']=true;
editorStates['your_textarea_id_etc']=true;
$(document).ready(function(){
// ==========================================================================
// initialize the cleditor object(s) for the textarea(s) used on this page...
// ==========================================================================
// initialize the 'your_textarea_id_1' textarea and store the cleditor object in the 'your_textarea_id_1_editor' variable...
var your_textarea_id_1_editor = $("#your_textarea_id_1").cleditor({
width: 650, // width not including margins, borders or padding
height: 220, // height not including margins, borders or padding
controls: // controls to add to the toolbar
"bold italic underline | font size " +
"style | color highlight removeformat | bullets numbering | outdent " +
"indent | alignleft center alignright justify | pastetext source",
}).change(function (){
if(editorStates['your_textarea_id_1']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
valid_editor_text('your_textarea_id_1'); // re-validate this input
};
});
// initialize the 'your_textarea_id_2' textarea and store the cleditor object in the 'your_textarea_id_2_editor' variable...
var your_textarea_id_2_editor = $("#your_textarea_id_2").cleditor({
width: 650, // width not including margins, borders or padding
height: 220, // height not including margins, borders or padding
controls: // controls to add to the toolbar
"bold italic underline | font size " +
"style | color highlight removeformat | bullets numbering | outdent " +
"indent | alignleft center alignright justify | pastetext source",
}).change(function (){
if(editorStates['your_textarea_id_2']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
valid_editor_text('your_textarea_id_2'); // re-validate this input
};
});
// initialize the 'your_textarea_id_etc' textarea and store the cleditor object in the 'your_textarea_id_etc_editor' variable...
var your_textarea_id_etc_editor = $("#your_textarea_id_etc").cleditor({
width: 650, // width not including margins, borders or padding
height: 220, // height not including margins, borders or padding
controls: // controls to add to the toolbar
"bold italic underline | font size " +
"style | color highlight removeformat | bullets numbering | outdent " +
"indent | alignleft center alignright justify | pastetext source",
}).change(function (){
if(editorStates['your_textarea_id_etc']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
valid_editor_text('your_textarea_id_etc'); // re-validate this input
};
});
// ==========================================================================
// initialize the jquery validation-engine
// ==========================================================================
// Note: 'mainform' is the id value of the form element that contains the three textarea inputs
// Replace this with the id value of YOUR form id!
jQuery("#mainform").validationEngine('attach', {
onValidationComplete: function(form, status){
// Note: 'status' will already be true/false based on the validation results of any other inputs that you
// are validating using the typical validation methods provided by the validationEngine plugin.
// Now we need to validate the textarea (cleditor html editor) inputs...
// validate the 'your_textarea_id_1' textarea input
if( your_textarea_id_1_editor[0].sourceMode() == false ){
// in editor mode, need to update the hidden textarea input
your_textarea_id_1_editor[0].updateTextArea();
}
if(! valid_editor_text('your_textarea_id_1') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
// The validation on this input failed...
status=false; // prevent the form from submitting
}
// validate the 'your_textarea_id_2' textarea input
if( your_textarea_id_2_editor[0].sourceMode() == false ){
// in editor mode, need to update the hidden textarea input
your_textarea_id_2_editor[0].updateTextArea();
}
if(! valid_editor_text('your_textarea_id_2') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
// The validation on this input failed...
status=false; // prevent the form from submitting
}
// validate the 'your_textarea_id_etc' textarea input
if( your_textarea_id_etc_editor[0].sourceMode() == false ){
// in editor mode, need to update the hidden textarea input
your_textarea_id_etc_editor[0].updateTextArea();
}
if(! valid_editor_text('your_textarea_id_etc') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
// The validation on this input failed...
status=false; // prevent the form from submitting
}
// submit if there are no validation errors
if(status == true){
form.validationEngine('detach'); // prevents an endless loop
form.submit(); // form is valid, now submit it
}
}
});
}); // end doc ready
// ============================================================================
// The 'valid_editor_text' function
// This function does the actual validation of the textarea (html editor) input
// ============================================================================
function valid_editor_text(inputID){
str = $('#'+inputID).val();
// Note: str contains the value of the textarea input so do whatever validations you need
// against that. Return true if it's valid or false if it isn't.
// Right now I am just checking to make sure that the user entered anything at all ...
// remove any <br>, <br />, , {spaces}, and/or {newlines} from the beginning of the string
// just to make sure the user typed some actual text instead of random spaces and enter keys (aka nothing)
str = str.replace(/^(?:<[Bb][Rr](?: \/)?>|\&[Nn][Bb][Ss][Pp];|\n| )+/g,'');
if(str.length > 0){
console.log("valid_editor_text('"+inputID+"')"+' returning true');
editorStates[inputID]=true;
// hide any previous prompts on this input
$('#'+inputID+'_prompt_location').validationEngine('hide');
return true;
}else{
console.log("valid_editor_text('"+inputID+"')"+' returning false');
editorStates[inputID]=false;
// need to display the validation message for this input
$('#'+inputID+'_prompt_location').validationEngine('showPrompt', 'This field is required.', 'required', 'topRight', true);
return false;
}
}
</script>
</head>
<body>
<form action="youraction.goes.here" method="post" name="mainform" id="mainform">
<!-- Add a placeholder div that is used to target the position of a validation message if the validation fails
The id value is the value of your textarea id with '_prompt_location' appended, like so.. -->
<div>
<div id="your_textarea_id_1_prompt_location"></div>
<!-- Finally, the textarea input that is causing all this fuss .. -->
<textarea id="your_textarea_id_1" name="your_textarea_id_1"></textarea>
</div>
<!-- repeat for the other textareas you are using .. -->
<div>
<div id="your_textarea_id_2_prompt_location"></div>
<textarea id="your_textarea_id_2" name="your_textarea_id_2"></textarea>
</div>
<div>
<div id="your_textarea_id_etc_prompt_location"></div>
<textarea id="your_textarea_id_etc" name="your_textarea_id_etc"></textarea>
</div>
<p>Here is a standard text input to demo how typical validation works along with our custom ..<br />
<input type="text" name="a_standard_input" id="a_standard_input" value="" class="validate[required]" />
</p>
<p>
<input type="submit" name="b1" value="Submit this form!" />
<!-- Note: the validation occurs when the form is submitted via submit button or javascript (not shown) -->
</p>
</form>
</body>
</html>
于 2013-07-08T22:57:21.603 回答
1
一个更简单的解决方案：阅读验证引擎文档
现在，假设您希望在文本大小超过 65536 个字符时阻止提交表单：
<script type="text/javascript">
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#newForm").validationEngine();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#textArea").cleditor({
// cleditor options here
});
});
</script>
<form id="newForm" name="newForm" method="post" action="yourphppage.php" onSubmit="return validatesize()">
<textarea id="textArea" name="textArea"></textarea>
<input name="submit" id="button" type="submit" value="Submit">
</form>
<script type="text/javascript">
function validatesize() {
submitFlag=true;
if(document.newForm.textArea.value.length>65536){
submitFlag=false;
$("#textArea").validationEngine('showPrompt', 'Custom message', 'red', 'bottomLeft')
}
return submitFlag;
}
</script>
不要忘记将脚本放在 HEAD 部分：
<link rel="stylesheet" type="text/css" href="jquery.cleditor.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cleditor.js"></script>
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<script type="text/javascript" src="jquery.validationEngine-en.js"></script>
于 2014-09-16T14:18:40.297 回答