در این مقاله، به بررسی دو ابزار قدرتمند در اکوسیستم توسعه وب (به‌ویژه در محیط‌های ASP.NET) می‌پردازیم: jQuery Unobtrusive Validation برای مدیریت منطق اعتبارسنجی بدون شلوغ کردن کدها، و Validation Summary برای نمایش منسجم خطاها.

اعتبارسنجی Unobtrusive چیست؟

واژه Unobtrusive به معنای «غیر مزاحم» است. در گذشته، برای اعتبارسنجی فرم‌ها مجبور بودیم کدهای جاوااسکریپت زیادی را مستقیماً درون تگ‌های HTML (مثلاً با ویژگی onsubmit) بنویسیم. این کار باعث شلوغی کد و دشواری در نگهداری (Maintenance) می‌شد.

کتابخانه jQuery Unobtrusive Validation از ویژگی‌های HTML5 (مشخصاً ویژگی‌های data-*) استفاده می‌کند تا منطق اعتبارسنجی را از ساختار صفحه جدا کند.

مزایای اصلی:

• جداسازی دغدغه‌ها (Separation of Concerns): کد HTML شما تمیز باقی می‌ماند.

• کاهش حجم کد: نیازی به نوشتن توابع تکراری برای هر فرم نیست.

• هماهنگی کامل با سرور: اگر از تکنولوژی‌هایی مثل ASP.NET Core استفاده می‌کنید، این کتابخانه به‌صورت خودکار ویژگی‌های مدل (Data Annotations) را به کدهای سمت کلاینت تبدیل می‌کند.

زیرساخت و نحوه عملکرد

برای اینکه این سیستم به درستی کار کند، به سه کتابخانه کلیدی نیاز دارید که باید به ترتیب زیر در پروژه لود شوند:

1. jQuery: کتابخانه پایه.

2. jQuery Validate: هسته اصلی اعتبارسنجی.

3. jQuery Unobtrusive Validation: پلاگینی که پل ارتباطی بین data- ویژگی‌ها و هسته اصلی است.

مکانیزم کارکرد:

وقتی صفحه لود می‌شود، این کتابخانه به دنبال ویژگی‌هایی مثل data-val="true" می‌گردد. اگر فیلدی این ویژگی را داشته باشد، Unobtrusive متوجه می‌شود که باید قوانین اعتبارسنجی را روی آن اعمال کند.

پیاده‌سازی عملی Validation Summary

Validation Summary فضایی در فرم است که تمام خطاهای موجود را به صورت یک لیست (معمولاً در بالای فرم) نمایش می‌دهد. این روش به جای نمایش خطا در کنار هر فیلد (یا در کنار آن)، یک دید کلی از مشکلات فرم به کاربر می‌دهد.

ساختار HTML برای Validation Summary:

• validation-summary-valid: زمانی که خطایی وجود ندارد، این کلاس اعمال می‌شود (معمولاً در CSS مخفی می‌گردد).

• validation-summary-errors: وقتی خطایی رخ می‌دهد، جاوااسکریپت کلاس را به این تغییر می‌دهد تا استایل‌های قرمز رنگ و خطاها نمایش داده شوند.

بررسی عمیق ویژگی‌های data-val

بیایید ببینیم یک فیلد ورودی ساده چگونه با استفاده از این تکنولوژی تعریف می‌شود:

<input type="text" 
       name="Email" 
       data-val="true" 
       data-val-required="ایمیل الزامی است" 
       data-val-email="فرمت ایمیل صحیح نیست" />

<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>

1. data-val="true": فعال‌سازی اعتبارسنجی برای این المان.

2. data-val-required: پیام خطا در صورت خالی بودن.

3. data-valmsg-for: مشخص می‌کند که پیام‌های خطای مربوط به کدام فیلد باید در این تگ span نمایش داده شود.

استایل‌دهی به خطاها (CSS)

بدون CSS، اعتبارسنجی فقط چند متن ساده است. برای ایجاد یک تجربه حرفه‌ای، باید از کلاس‌های استانداردی که این کتابخانه به المان‌ها اضافه می‌کند استفاده کنید:

/* استایل کلی برای لیست خطاها در بالای صفحه */
.validation-summary-errors {
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* استایل برای فیلدهایی که ورودی نامعتبر دارند */
.input-validation-error {
    border: 2px solid #b94a48 !important;
    background-color: #fee;
}

/* متن خطای زیر هر فیلد */
.field-validation-error {
    color: #b94a48;
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
}

استفاده در سناریوهای داینامیک (Ajax)

یکی از چالش‌های رایج این است که وقتی یک فرم را با Ajax بارگذاری می‌کنید، اعتبارسنجی Unobtrusive روی آن کار نمی‌کند. دلیل آن ساده است: در زمان لود اولیه صفحه، این فرم وجود نداشته که اسکریپت‌ها روی آن اصطلاحاً "Bind" شوند.

راه حل: پس از بارگذاری فرم جدید با Ajax، باید دستور پارس مجدد را اجرا کنید:

$.ajax({
    url: '/get-form',
    success: function (data) {
        $('#form-container').html(data);
        
        // بازخوانی تنظیمات اعتبارسنجی برای فرم جدید
        var $form = $('#form-container').find('form');
        $.validator.unobtrusive.parse($form);
    }
});

ترکیب Validation Summary و اعتبارسنجی کنار فیلد

بهترین استراتژی برای فرم‌های پیچیده، استفاده ترکیبی است:

1. Validation Summary: در بالای فرم برای نمایش لیست تمام خطاها (مناسب برای کاربران موبایل که ممکن است متوجه نشوند کجای فرم خطا داده است).

2. Inline Validation: در کنار هر فیلد برای راهنمایی دقیق‌تر.

دریافت کتابخانه‌های مورد نیاز و فعالسازی

شما به سه فایل جاوااسکریپت نیاز دارید. می‌توانید آن‌ها را از طریق CDN، NuGet یا LibMan به پروژه اضافه کنید.

روش سریع (CDN):

این کدها را در انتهای تگ در فایل Layout (مثلاً _Layout.cshtml) قرار دهید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>

نکته حیاتی: ترتیب لود شدن این اسکریپت‌ها بسیار مهم است. اگر jquery.validate.unobtrusive قبل از خودِ jquery لود شود، با خطا مواجه می‌شوید و اعتبارسنجی کار نخواهد کرد.

فعال‌سازی در تنظیمات پروژه

در پروژه‌های ASP.NET، باید مطمئن شوید که این ویژگی در لایه سرور فعال است.

در ASP.NET Core:

به‌صورت پیش‌فرض فعال است، اما برای اطمینان در فایل appsettings.json چک کنید:

"AppSettings": {
  "ClientSideValidationEnabled": true,
  "UnobtrusiveJavaScriptEnabled": true
}

در ASP.NET MVC 5 (قدیمی‌تر):

در فایل Web.config این بخش را چک کنید:

استفاده در View (سمت کلاینت)

حالا که پیش‌نیازها آماده است، باید فرم خود را با استفاده از Tag Helpers یا Html Helpers بسازید تا ویژگی‌های data-val خودکار تولید شوند.

مثال با Razor:

@model UserViewModel

نحوه عملکرد در پس‌زمینه

وقتی شما از asp-for استفاده می‌کنید و در مدل خود (ViewModel) ویژگی [Required] را گذاشته‌اید، ASP.NET هنگام رندر کردن صفحه، HTML را به این صورت می‌سازد:

کتابخانه Unobtrusive بلافاصله پس از لود شدن، تمام فیلدهایی که data-val="true" دارند را شناسایی کرده و بدون اینکه شما یک خط کد جاوااسکریپت بنویسید، جلوی ارسال فرم ناقص را می‌گیرد.

عیب‌یابی (چرا کار نمی‌کند؟)

اگر فرم شما هنوز بدون اعتبارسنجی ثبت می‌شود، این لیست را چک کنید:

1. کنسول مرورگر (F12): آیا خطای "jQuery is not defined" می‌بینید؟ (احتمالاً ترتیب اسکریپت‌ها غلط است).

2. دوبار لود شدن jQuery: مطمئن شوید jQuery را یک‌بار در بالا و یک‌بار در پایین صفحه لود نکرده باشید؛ این کار باعث از کار افتادن پلاگین‌ها می‌شود.

3. نام فیلدها: ویژگی name در تگ input باید دقیقاً با نام Property در مدل یکی باشد.

استفاده از Partial Viewها (نکته حرفه‌ای)

اگر فرم شما داخل یک Partial View است که به صورت داینامیک (Ajax) لود می‌شود، باید بعد از لود شدن فرم، اعتبارسنجی را دوباره فعال کنید:

$.get('/User/GetRegistrationForm', function(data) {
    $('#container').html(data);
    
    // این خط جادو می‌کند:
    $.validator.unobtrusive.parse('#container');
});

اعتبارسنج‌های سفارشی (Custom Validation)

برای ساخت اعتبارسنج‌های سفارشی (Custom Validation) که هم در سمت سرور (#C) و هم در سمت کلاینت (Unobtrusive) کار کنند، باید دو مرحله را طی کنید:

1. ساخت Attribute در سی‌شارپ: برای امنیت سمت سرور.

2. نوشتن Adapter در جاوااسکریپت: برای اجرای بدون رفرش در سمت کلاینت.

۱. اعتبارسنجی شماره موبایل ایران

این کد چک می‌کند که شماره با 09 شروع شده و ۱۱ رقم باشد.

سمت سرور (#C):

public class IranianMobileAttribute : RegularExpressionAttribute 
{
    public IranianMobileAttribute() : base(@"^09\d{9}$") 
    {
        ErrorMessage = "شماره موبایل وارد شده معتبر نیست (مثال: 09121234567)";
    }
}

استفاده در مدل:

[IranianMobile]
public string PhoneNumber { get; set; }

اعتبارسنجی کد ملی (الگوریتم ریاضی)

کد ملی فقط ۱۰ رقم نیست، بلکه رقم آخر یک «رقم کنترلی» است که از روی ۹ رقم قبلی محاسبه می‌شود.

سمت کلاینت (JavaScript):

باید این متد را به jQuery Validate اضافه کنید:

$.validator.addMethod("codemelli", function (value, element) {
    if (!/^\d{10}$/.test(value)) return false;
    var check = parseInt(value[9]);
    var sum = 0;
    for (var i = 0; i < 9; i++) {
        sum += parseInt(value[i]) * (10 - i);
    }
    var remainder = sum % 11;
    return (remainder < 2 && check == remainder) || (remainder >= 2 && check == 11 - remainder);
}, "کد ملی وارد شده معتبر نیست");

// معرفی به Unobtrusive
$.validator.unobtrusive.adapters.addBool("codemelli");

 پسورد امن (Strong Password)

برای بررسی وجود حروف بزرگ، کوچک، عدد و کاراکتر خاص.

قانون (Regex):

$$^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$$

$

استفاده در مدل:

[RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$", 
 ErrorMessage = "رمز عبور باید حداقل ۸ کاراکتر و ترکیبی از حرف بزرگ، کوچک، عدد و نماد باشد")]
public string Password { get; set; }

۴. بررسی پسوند فایل (Allowed Extensions)

اعتبارسنجی فایل‌ها کمی متفاوت است چون با IFormFile سرور و files کلاینت سرکار داریم.

سمت کلاینت:

$.validator.addMethod("extension", function (value, element, param) {
    param = typeof param === "string" ? param.replace(/,/g, "|") : "png|jpe?g|gif";
    return this.optional(element) || value.match(new RegExp("\\.(" + param + ")$", "i"));
}, "پسوند فایل مجاز نیست");

$.validator.unobtrusive.adapters.addSingleVal("extension", "allowed");

در سمت HTML:

اجباری کردن تیک (Checkbox Checked)

برای موادی مثل «پذیرش قوانین و مقررات». ویژگی [Required] روی boolean همیشه true برمی‌گرداند (چون false هم یک مقدار است)، پس باید از یک Validation سفارشی استفاده کرد.

سمت سرور (#C):

public class MustBeTrueAttribute : ValidationAttribute, IClientModelValidator
{
    public override bool IsValid(object value) => value is bool b && b;

    public void AddValidation(ClientModelValidationContext context) {
        context.Attributes.Add("data-val", "true");
        context.Attributes.Add("data-val-mustbetrue", ErrorMessage);
    }
}

سمت کلاینت:

$.validator.addMethod("mustbetrue", function (value, element) {
    return element.checked;
});
$.validator.unobtrusive.adapters.addBool("mustbetrue");

جمع‌بندی در Validation Summary

برای اینکه تمام این خطاهای سفارشی در بالای فرم نمایش داده شوند، کافیست در ویوی خود این تگ را قرار دهید:

یک نکته طلایی برای حرفه‌ای‌ها:

اگر می‌خواهید کاربر بلافاصله بعد از خروج از فیلد (بدون زدن دکمه ثبت) خطا را ببیند، می‌توانید تنظیمات زیر را به اسکریپت‌های خود اضافه کنید:

var settings = $.data($('form')[0], 'validator').settings;
settings.onfocusout = function (element) { $(element).valid(); };

نکات کلیدی و Best Practices

• امنیت: هرگز به اعتبارسنجی سمت کلاینت (Unobtrusive) اکتفا نکنید. کاربران حرفه‌ای می‌توانند جاوااسکریپت را غیرفعال کنند. اعتبارسنجی سمت سرور (Server-side) خط قرمز امنیت است.

• بومی‌سازی (Localization): پیام‌های خطا را با توجه به زبان کاربر شخصی‌سازی کنید.

• Accessibility (دسترسی‌پذیری): اطمینان حاصل کنید که خطاهای Validation Summary توسط Screen Readerها برای افراد کم‌بینا خوانده می‌شود (با استفاده از aria-live="polite").

جمع‌بندی

استفاده از jQuery Unobtrusive Validation به همراه یک Validation Summary خوش‌ساخت، تعادل کاملی بین تمیزی کد توسعه‌دهنده و راحتی کاربر نهایی ایجاد می‌کند. با جدا کردن منطق از ساختار HTML، نگهداری پروژه در درازمدت بسیار آسان‌تر خواهد بود.

فراموش نکنید که اعتبارسنجی فقط یک مانع برای جلوگیری از ورود داده غلط نیست؛ بلکه یک گفتگو با کاربر برای هدایت او به سمت ثبت موفقیت‌آمیز اطلاعات است.