اعتبارسنجی CKeditor توسط JQuery
شنبه 18 مهر 1394در این مقاله یک CKeditor در پروژه MVC خود قرار داده و سپس آنرا اعتبارسنجی خواهیم کرد.بدین صورت که یک فیلدی در صفحه به طور مثال یک Texterae علاوه بر CKeditor باید پر شود و اطلاعات درون آن وارد شود وگرنه اطلاعات به سرور ارسال نخواهد شد.
ابتدا یک CKeditor به صفحه Html ویو خود اضافه می کنیم.در مرحله اول باید Script های زیر به پروژه اضافه شوند.
<script src="~/Scripts/jquery-1.11.1.js"></script>
<script src="~/Scripts/JQuery.Vaidate.js"></script>
<script src="~/ckeditor/ckeditor.js"></script>
در مرحله بعد باید طبق کد زیر آیتم هایی به صفحه اضافه کنیم تا در مرحله بعدی یک textarea را به CKeditor تبدیل کنیم.
<body dir="rtl">
<form>
<div class="row">
<div class="col-md-4">
<textarea name="text1" id="text1"></textarea>
</div>
<textarea style="width:200px;height:475px;" id="text2" name="text2"></textarea>
</div>
<br />
<input type="submit" name="name" value="ارسال" id="btninput" class="btn-danger btn-group-lg btn-lg col-lg-4" />
</form>
</body>
حال باید اعلام کنیم کدام Textarea باید به CKeditor تبدیل شود برای این کار در قسمت script کد زیر را می نویسیم
<script>
$(function () {
$('#text1').ckeditor();
});
$(document).ready(function() {
$("form").validate({
ignore: [],
rules: {
text1: {
ckrequired: true //Custom required field
},
text2: {
required: true //Default required field fails
}
}
});
});
//Extention method for check CKEditor Control
// jQuery.validator.addMethod("customfunctionanme",validationfunction,validationmessage);
jQuery.validator.addMethod("ckrequired", function (value, element) {
var idname = $(element).attr('id');
var editor = CKEDITOR.instances[idname];
var ckValue = GetTextFromHtml(editor.getData()).replace(/<[^>]*>/gi, '').trim();
if (ckValue.length === 0) {
//if empty or trimmed value then remove extra spacing to current control
$(element).val(ckValue);
} else {
//If not empty then leave the value as it is
$(element).val(editor.getData());
}
return $(element).val().length > 0;
}, "این فیلد ضروری است و باید پر شود");
function GetTextFromHtml(html) {
var dv = document.createElement("DIV");
dv.innerHTML = html;
return dv.textContent || dv.innerText || "";
}
</script>
اگر پروژه را اجرا کنید دو صفحه Index و Ckeditor در قسمت ویو خواهید دید.در صفحه ایندکس با کمک مدل در MVC ادیتور CKeditor را به صفحه افزوده ایم ولی در ویو مربوط به صفحه Ckeditor از روش معمولی برای افزودن ادیتور ckeditor استفاده کرده ایم.
بعد از اینکه صفحه ckeditor را اجرا کردید دو عدد textarea خواهید دید که اولی به صورت ckeditor و دومی به صورت ساده است .کد Validation که نوشته ایم در دکمه ارسال به این صورت عمل می کند که اگر اطلاعاتی در textarea معمولی ریخته نشود خطا خواهیم گرفت .درصورتی که اطلاعات درست باشد کار خاصی انجام نمی گیرد یعنی قرار نیست با زدن دکمه ارسال و بعد از Validation اطلاعات در جای خاصی ذخیره شود.
- Jquery
- 1k بازدید
- 3 تشکر