رویداد submit در جی کوئری

در این بخش از آموزش JQuery، رویداد submit را در طراحی سایت بررسی می کنیم. این رویداد یکی از ابزارهای مهم jQuery برای واکنش نشان دادن به ارسال فرم است و به کمک آن می توان داده های ورودی را پیش از ارسال بررسی کرد، پیام مناسب به کاربر نمایش داد یا فرایند ارسال را بر اساس شرایط مورد نظر مدیریت کرد.

رویداد ( ) submit زمانی رخ می دهد که کاربر یک فرم را ارسال کند؛ برای نمونه، با فشردن دکمه ارسال یا گاهی با فشردن کلید Enter در یکی از فیلدهای فرم. در این لحظه، تابع متصل به رویداد اجرا می شود و می تواند پیش از ادامه فرایند ارسال، اطلاعات فرم را بررسی کند. این رویداد فقط برای فرم ها کاربرد دارد و باید روی خود فرم یا انتخابگری که به فرم اشاره می کند ثبت شود.

کاربرد این رویداد به نمایش یک پیام ساده محدود نیست. توسعه دهنده می تواند از آن برای اعتبارسنجی سمت کاربر، جلوگیری از ارسال فرم ناقص، نمایش وضعیت در حال ارسال و آماده سازی داده ها استفاده کند. مدیریت درست submit باعث می شود کاربر بازخورد روشن تری دریافت کند و خطاهای رایج هنگام پر کردن فرم کاهش پیدا کند. با این حال، اعتبارسنجی مرورگر جایگزین بررسی اطلاعات در سمت سرور نیست؛ داده های مهم همیشه باید در سرور نیز کنترل شوند.

برای اتصال یک تابع به رویداد فرم، در نمونه های قدیمی jQuery از متد submit استفاده می شد. این متد دو شکل رایج دارد: شکل نخست برای فعال کردن رویداد ارسال فرم به کار می رود و شکل دوم یک تابع را به عنوان واکنش دهنده ثبت می کند. در کدهای جدیدتر، روش on("submit", handler) خواناتر است و معمولا برای ثبت رویداد پیشنهاد می شود.

$( "selector" ).submit();
$( "selector" ).submit( function );
$( "selector" ).on( "submit", function );

selector انتخابگری است که مشخص می کند کدام فرم هدف قرار بگیرد؛ برای مثال می توان یک فرم را با شناسه یا کلاس آن انتخاب کرد. انتخابگر عمومی form همه فرم های صفحه را انتخاب می کند، بنابراین در صفحه ای با چند فرم بهتر است انتخابگر دقیق تری مانند #contactForm به کار رود. function تابعی است که پس از رخ دادن رویداد اجرا می شود و دستورات لازم را در خود جای می دهد.

مثال زیر پیام هشدار را هنگام ارسال فرم نمایش می دهد. در پروژه واقعی، بهتر است انتخابگر فرم را با شناسه مشخص کنید تا فقط فرم مورد نظر تحت تاثیر قرار بگیرد. در این نمونه، event.preventDefault() از ارسال عادی فرم جلوگیری می کند تا پیام در صفحه دیده شود.

$(function() {
  $("#contactForm").on("submit", function(event) {
    event.preventDefault();
    alert("Submitted");
  });
});

اگر تابع رویداد فقط پیام نشان دهد اما ارسال فرم را متوقف نکند، مرورگر پس از اجرای تابع همچنان ممکن است اطلاعات را به نشانی تعریف شده در ویژگی های فرم ارسال کند. برای متوقف کردن رفتار پیش فرض، از event.preventDefault() استفاده کنید. این کار برای اعتبارسنجی یا ارسال داده با Ajax کاربرد دارد، اما اگر می خواهید فرم به روش معمول به سرور فرستاده شود، نباید بی دلیل جلوی رفتار پیش فرض را بگیرید.

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

پس از آماده شدن صفحه، رویداد را متصل کنید. کد جاوااسکریپت باید زمانی اجرا شود که عنصر فرم در صفحه وجود دارد. قرار دادن کد در تابع آماده شدن سند، یا بارگذاری اسکریپت در زمان مناسب، از انتخاب نشدن فرم جلوگیری می کند. اگر فرم به صورت پویا بعدا به صفحه اضافه می شود، روش اتصال رویداد را متناسب با ساختار برنامه انتخاب کنید.

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

رفتار پس از بررسی را تعیین کنید. اگر فرم معتبر باشد، می توانید اجازه دهید به طور معمول ارسال شود یا با Ajax اطلاعات را بدون بارگذاری دوباره صفحه به سرور بفرستید. در حالت Ajax، وضعیت ارسال، پاسخ سرور و خطاهای احتمالی را به کاربر نشان دهید. اگر فرم نامعتبر است، با جلوگیری از رفتار پیش فرض، فرصت اصلاح اطلاعات را فراهم کنید.

یکی از مزیت های رویداد submit این است که می توان بررسی های مرتبط با چند فیلد را در یک نقطه مدیریت کرد. برای نمونه، پیش از ارسال، وجود مقدار در فیلدهای ضروری بررسی می شود و در صورت نبودن اطلاعات، پیام روشنی نمایش داده می شود. این روش برای فرم تماس، ثبت نام، جستجو و ورود کاربرد دارد. بهتر است هر بررسی هدف مشخصی داشته باشد و در صورت نامعتبر بودن داده ها، تمرکز صفحه به فیلدی منتقل شود که نیاز به اصلاح دارد.

بررسی جاوااسکریپت به بهبود تجربه کاربری کمک می کند، اما تضمین امنیت داده ها نیست. کاربر می تواند اسکریپت را غیرفعال کند یا درخواست دلخواهی به سرور بفرستد؛ بنابراین سرور باید همه داده های دریافتی را مستقلا اعتبارسنجی کند. همچنین برای جلوگیری از درخواست های نامعتبر یا سوءاستفاده، باید از راهکارهای امنیتی متناسب با نوع برنامه استفاده شود. رویداد submit بخشی از رابط کاربری است، نه جایگزین کنترل سمت سرور.

• انتخابگر را بررسی کنید: اگر شناسه فرم اشتباه باشد یا در صفحه تکراری باشد، تابع روی فرم مورد نظر اجرا نمی شود یا روی عنصر دیگری اثر می گذارد.
• بارگذاری jQuery را کنترل کنید: کتابخانه باید پیش از اجرای کدی که از علامت دلار استفاده می کند بارگذاری شده باشد.
• از ثبت چندباره رویداد پرهیز کنید: اجرای مکرر کد اتصال ممکن است باعث شود تابع چند بار برای یک ارسال اجرا شود.
• رفتار پیش فرض را آگاهانه مدیریت کنید: برای ارسال معمولی فرم، جلوی ارسال را نگیرید؛ برای پردازش سفارشی یا Ajax، آن را در زمان مناسب متوقف کنید.
• ارسال با Enter را آزمایش کنید: کاربر ممکن است فرم را با صفحه کلید ارسال کند، پس آزمایش را فقط به کلیک روی دکمه محدود نکنید.
• پیام بازخورد ارائه دهید: پس از موفقیت یا بروز خطا، وضعیت درخواست را به شکل واضح و قابل دسترس اعلام کنید.

رویداد submit در jQuery راهی ساده برای واکنش به ارسال فرم و اجرای کدهای مورد نیاز است. با انتخاب درست فرم، ثبت یک تابع مشخص و مدیریت سنجیده رفتار پیش فرض، می توان فرم هایی کاربردی تر و قابل فهم تر ساخت. برای پروژه های جدید، اتصال رویداد با on("submit", handler) انتخاب مناسبی است. به یاد داشته باشید که بررسی سمت کاربر برای راحتی استفاده است و اعتبارسنجی سمت سرور همچنان ضروری خواهد بود.