www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫اعتبار سنجی سمت کاربر wysiwyg-editor ها در ASP.NET MVC


نویسنده: وحید نصیری
تاریخ: ۱۳۹۳/۰۶/۰۵ ۱۲:۵۰
آدرس: www.dntips.ir
تفاوتی نمی‌کند که از کدامیک از HTML Editorها یا به عبارتی wysiwyg-editorهای موجود، جهت ورود اطلاعات استفاده می‌کنید. هیچکدام از آن‌ها سبب فراخوانی اعتبارسنجی Required سمت کاربر نمی‌شوند. چرا؟
علت اینجا است که با فعال سازی wysiwyg-editorهای موجود، المان HTML پیش فرض مانند یک TextArea حالت مخفی پیدا می‌کند:


و اگر به سورس کد فایل jquery.validate.js مراجعه کنید، یک چنین تعریف پیش فرضی در آن موجود است:
$.extend( $.validator, {
defaults: {
ignore: ":hidden",
به این معنا که در حین اعتبارسنجی سمت کاربر، از کلیه المان‌های hidden بر روی صفحه صرفنظر خواهد شد.
برای رفع این مشکل کافی است بنویسیم:
 jQuery.validator.setDefaults({ ignore: ":hidden:not(textarea)" });
در اینجا پیش فرض‌های jQuery validator بازنویسی شده و در آن از textareaهای مخفی صرفنظر نمی‌شود.
اگر می‌خواهید کلا از چیزی صرفنظر نشود، مقدار آن‌را به "" تنظیم کنید.

مشکل دوم! متد required پیش فرض، فقط به رشته‌های خالی یا نال واکنش نشان می‌دهد. اما اگر کاربری در اینجا <p><br/></p> را وارد کرد، چطور؟
در این حالت نیاز است متد rqeuired پیش فرض jQuery validator را به نحو ذیل بازنویسی کنیم:
    <script type="text/javascript">
        // حذف تمام تگ‌های یک قطعه متن
        function removeAllTagsAndTrim(html) {
            return !html ? "" : jQuery.trim(html.replace(/(<([^>]+)>)/ig, ""));
        }

        // این تنظیم برای پردازش ادیتور مخفی وب لازم است
        jQuery.validator.setDefaults({ ignore: ":hidden:not(textarea)" });

        // متد اصلی اعتبارسنجی را ابتدا ذخیره می‌کنیم
        jQuery.validator.methods.originalRequired = jQuery.validator.methods.required;
        // نحوه بازنویسی متد توکار اعتبار سنجی جهت استفاده از یک متد سفارشی
        jQuery.validator.addMethod("required", function (value, element, param) {
            value = removeAllTagsAndTrim(value);
            if (!value) {
                return false;
            }
            //  فراخوانی متد اصلی اعتبار سنجی در صورت شکست تابع سفارشی
            return jQuery.validator.methods.originalRequired.call(this, value, element, param);
        }, jQuery.validator.messages.required);
    </script>
متد removeAllTagsAndTrim کلیه تگ‌های یک عبارت HTML ایی را حذف می‌کند. متد trim جی‌کوئری نیز سبب حذف فواصل خالی در ابتدا و انتهای یک رشته می‌شود. اکنون نیاز است این متد سفارشی را جهت تمیزسازی عبارت ورودی به متد توکار required اعمال کنیم.
برای اینکار نیاز است متد اصلی required را در جایی ذخیره کنیم تا در صورت شکست اعتبارسنجی سفارشی، همان متد اصلی فراخوانی گردد. در ادامه با فراخوانی jQuery.validator.addMethod و بکارگیری نام required، دقیقا همان متد اصلی required موجود بازنویسی خواهد شد. در ابتدای کار تگ‌های ورودی پاک شده و سپس اعتبارسنجی می‌شوند.
در ادامه فراخوانی متد اصلی required را ملاحظه می‌کنید. همچنین با استفاده از jQuery.validator.messages.required اصل پیام خطای تنظیم شده به کاربر نمایش داده خواهد شد.
مطالب مشابه

نظرات

  • آرمین ضیاء در ۱۳۹۳/۰۶/۰۵ ۲۱:۱۵
    مرسی بابت این پست، راه حل جدید و کارآمدی یاد گرفتم.
    پیش از این برای ادیتور‌های Froala به نحو زیر عمل می‌کردم:

    var editor = $("#content"); // textArea id
var text = editor.editable("getText"); // gets plain text
if(text.length < 1) {
    alert('Post content cannot be empty');
    editor.focus();
    return false;
}

    یک سوال: با استفاده از راه حلی که مطرح کردید، چطور میشه ادیتور رو در صورت وجود خطا Focus کرد و یا کلاس CSS خاصی بدان اضافه کرد؟
    • وحید نصیری در ۱۳۹۳/۰۶/۰۵ ۲۱:۵۵
      در همان callback اعتبارسنجی (function (value, element, param به element در حال بررسی، دسترسی وجود دارد. اما اینجا کاربردی ندارد، چون مخفی است (تصویر اول). یعنی focus بر روی آن، یا تغییر CSS آن قابل مشاهده نخواهد بود. اما داخل همین رویداد گردان می‌توان نوشت:
      $(".froala-element").focus();
$(".froala-element").css({"border-color": "red"});
  • مهمان در ۱۳۹۳/۰۶/۲۶ ۱۰:۱
    برای محدود کردن تعداد کاراکترها بدون استفاده از StringLength در مدل چیکار میشه کرد؟
    یه کتابخانه با نام Bootstrap Maxlength هست که برای محدود کردن تعداد کاراکتر نوشته شده و با بوت استرپ هم سازگاره و خیلی زیبا به کاربر نشون میده چندتا کارکتر دیگه میتونه وارد کنه و تاحالا چندتا زده ولی روی WYSIWYG Editor جواب نداد!
    من از froala editor استفاده کرده ام.
    • وحید نصیری در ۱۳۹۳/۰۶/۲۶ ۱۰:۱۶
      - در مورد پروژه‌های سایت‌های ثالث، به issue tracker آن‌ها مراجعه کنید و سپس درخواست دهید تا متد removeAllTagsAndTrim فوق را هم تحت عنوان یک گزینه‌ی جدید اضافه کنند.
      - در مورد موضوع بحث جاری، در فایل jquery.validate.js سه متد minlength ، maxlength و rangelength برای بررسی طول حروف وارد شده، مورد استفاده قرار می‌گیرند. بازنویسی آن‌ها جهت اعمال متد removeAllTagsAndTrim، دقیقا شبیه به بازنویسی متد required است که در بحث جاری ملاحظه کردید.
      • مهمان در ۱۳۹۳/۰۶/۲۶ ۱۰:۴۷
        متد maxlength را چطور باید باز نویسی کنم؟
        راه حلی که در متن ذکر کردید قبلا رو Editor اعمال کرده بودم حالا باید در ادامه اون تکه کد متد maxlength را بنویسم و همچنین نیاز به Attribut حداکثر تعداد کاراکتر maxlength مربوط به تگ textarea هم هست؟
        • وحید نصیری در ۱۳۹۳/۰۶/۲۶ ۱۱:۴
          کلیات آن تفاوتی نمی‌کند. فقط در کدهای فوق، هر جایی required هست، آن‌را تبدیل کنید به maxlength. چون در پایان کار، متد اصلی maxlength فراخوانی می‌شود، روش بکار گرفته شده، عمومی است و قابل تعمیم به تمام متدهای فایل jquery.validate.js .
  • امیر نوروزیان در ۱۳۹۳/۱۰/۲۱ ۲۲:۴۲
    با سلام؛ تو سورس کد من چنین کدی رو نمی‌بینیم: 
     $.extend( $.validator, {
defaults: {
ignore: ":hidden" ,
    کد‌های جاری را دقیقا کجا بزارم.
    • وحید نصیری در ۱۳۹۳/۱۰/۲۱ ۲۲:۵۳
      - این تنظیم پیش فرض در فایل jquery.validate.js موجود است (عبارت ":hidden" را در آن جستجو کنید).
      - فقط متد jQuery.validator.setDefaults یاد شده را به همراه پارامترهایی که ذکر شد، یکبار در صفحه فراخوانی کنید (پس از الحاق فایل jquery.validate.js).