Я пишу свой редактор wysiwyg, в него входит всего несколько тегов H1, H2 - загаловки
B - жирный,
I - курсив,
S-зачёркивание,
U-подчёркивание,
URL - ссылка.
И мне нужно приделать валидацию jquery.validate.min.js. И я тут столкнулась с проблемой. Если использовать просто textarea, то валидация работает, но как только я убираю textarea c помощью display: none и заменяю её на iframe куда будут записываться текст и теги то уже валидация не работает. У только что созданного ifram’а есть аттрибут name frameID, на который ссылается валидация и по идеи должно выводить ошибку но ничего не выводит. В коде я использовала два примера, один с textarea, а второй c iftame. Для проверки с wysiwyg и iframe я заменяю #form-data на #wysiwyg_form вот так
var v = $("#form-data").validate({, и правилах тоже надо заменить параметры text1 на frameId, вот так
rules: {
frameId : {
requiredtext: true
}
}
Во время проверок валидация не работает однако к форме добавляется атрибут novalidate="novalidate". Можно как-нибудь в моём случае добавить валидацию к iframe jquery.validate.min.js?
Вот весь мой код:
<!DOCTYPE html>
<html>
<head><title>Приер Editor</title>
<script src="./jquery.js"></script>
<script src="./jquery.validate.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css" />
<style>
.has-success > .form-control
{
background-color: #e3ffe5;
border: 1px solid #96b796;
line-height: 19px;
}
.has-danger > .form-control
{
background-color: #ffebef;
border: 1px solid red;
line-height: 19px;
}
.has-danger .control-label,
.has-danger .help-block,
.has-danger .form-control-feedback {
color: #d9534f;
}
#main1 {
width: 400px;
}
</style>
<script>
$(document).ready(function(e){
$.validator.addMethod("requiredtext", function (value, element) {
return value.length > 2;
}," Заполните это поле!!!");
var v = $("#wysiwyg_form").validate({
rules: {
frameId : {
requiredtext: true
}
},errorElement: "em",
errorElement: 'no',
errorClass: 'form-text invalid-feedback',
errorPlacement: function ( error, element ) {
if ( element.prop( "type" ) === "checkbox" ) {
// error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".form-group" ).addClass( "has-danger" ).removeClass( "has-success" );
},
unhighlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-danger" );
},
submitHandler: function() {
console.log("submit success");
}
});
});
</script>
</head>
<body>
<form id="wysiwyg_form">
<p>
<div class="form-group">
<textarea id="textareaID" class="form-control" name="text1" cols="45" rows="15"></textarea>
</div>
</p>
<p>
<input type="submit" value="Отправить" />
</p>
</form>
<script type="text/javascript">
var doc;
generate_wysiwyg("textareaID");
function generate_wysiwyg(textareaID) {
document.getElementById(textareaID).style.display = 'none';
var n = textareaID;
console.log(n);
var type = "href";
var iframe = '<input type="button" value="H1" id="_'+textareaID+'_FormatBlock" onclick="editor_action(this.id,'+n+',1)"/><input type="button" value="H2" id="_'+textareaID+'_FormatBlock" onclick="editor_action(this.id,'+n+',2)"/><input type="button" value="B" id="_'+textareaID+'_bold" onclick="editor_action(this.id,'+n+')"/><input type="button" value="I" id="_'+textareaID+'_italic" onclick="editor_action(this.id,'+n+')" /><input type="button" value="S" id="_'+textareaID+'_Strikethrough" onclick="editor_action(this.id,'+n+')"/><input type="button" value="U" id="_'+textareaID+'_Underline" onclick="editor_action(this.id,'+n+')"/><input type="button" value="URL" id="_'+textareaID+'_CreateLink" onclick="namedlink(this.id,1)"/><br /><iframe scrolling="no" frameborder="no" src="#" id="wysiwyg'+n+'" name="frameId"></iframe>';
document.getElementById(n).insertAdjacentHTML("afterEnd", iframe);
var content = "<html><head></head><body style='background-color: C0C0C0;'></body></html>";
//document.getElementById(n).value;
doc = document.getElementById("wysiwyg" + n).contentWindow.document;
// Write the textarea's content into the iframe
doc.open();
doc.write(content);
doc.close();
// Make the iframe editable in both Mozilla and IE
doc.body.contentEditable = true;
doc.designMode = "on";
console.log(doc);
doc.addEventListener('paste',function OnEditor()
{
setTimeout(function() {
cleanContent();
});
}, true);
editor_action = function(button_id,n,num="") {
var BtnParts = Array();
BtnParts = button_id.split("_");
var textareaID = button_id.replace(/^_(.*)_[^_]*$/, '$1');
var cmdID = BtnParts[ BtnParts.length-1 ];
var editor_obj = document.all["wysiwyg" + textareaID];
var editdoc = editor_obj.contentWindow.document;
document.getElementById("wysiwyg" + textareaID).contentWindow.focus();
if(cmdID=="FormatBlock")
{
editdoc.execCommand("FormatBlock", false, "h"+num);
}else
if(cmdID=="bold")
{
editdoc.execCommand(cmdID, false, "b");
}else if(cmdID=="italic")
{
editdoc.execCommand(cmdID, false, "i");
}else if(cmdID=="Strikethrough")
{
editdoc.execCommand(cmdID, false, null);
}else if(cmdID=="Underline")
{
editdoc.execCommand(cmdID, false, null);
}
}
$('#wysiwyg_form').on('submit', function(event){
event.preventDefault();
document.getElementById("content").innerHTML = doc.body.innerHTML;
});
}
function namedlink(button_id,theType)
{
var BtnParts = Array();
BtnParts = button_id.split("_");
var textareaID = button_id.replace(/^_(.*)_[^_]*$/, '$1');
var editor_obj = document.all["wysiwyg" + textareaID];
var editdoc = editor_obj.contentWindow.document;
var linkText = prompt("Enter the name of the link (optional):","");
// var selected = getSelectedText(editdoc);
if (theType == 1) {
prompt_text = "Enter the complete URL of the link:";
prompt_contents = "http://";
}
linkURL = prompt(prompt_text,prompt_contents);
if ((linkURL != null) && (linkURL != "")) {
var theText = '';
if ((linkText != null) && (linkText != "")) {
theText = "<a href="+linkURL+">"+linkText+"</a>";
}
else {
theText = "<a href="+linkURL+">"+linkURL+"</a>";
}
console.log("wysiwyg" + textareaID);
document.getElementById("wysiwyg" + textareaID).contentWindow.focus();
editdoc.execCommand('insertHtml', false, theText);
}
}
</script>
<div id="main1">
<form id="form-data" >
<div class="form-group">
<textarea class="form-control" name="text1" cols="45" rows="15" id="text1"></textarea>
</div>
<input type="submit">
</form>
</div>
<div id="content"></div>
</body>
</html>
