آموزش طراحی وب

نمایش پیغام خطا برای فیلدهای خالی فرم

چند وقت پیش یکی از دوستان درخواست داده بودند تا این آموزش رو در سایت قرار بدم. گاهی اوقات پیش میاد که میخواین برای فیلدهای فرمتون validation و اعتبارسنجی انجام بدید و برای فیلدهای متنی که کاربر خالی رد می کنه پیغام خطا نمایش بدید اما با افکت.

error message

اعتبارسنجی فیلدهای خالی فرم

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

چند وقت پیش یکی از دوستان درخواست داده بودند تا این آموزش رو در سایت قرار بدیم. گاهی اوقات پیش میاد که میخواین برای فیلدهای فرمتون validation و اعتبارسنجی انجام بدید و برای فیلدهای متنی که کاربر خالی رد می کنه پیغام خطا نمایش بدید.

تو این مقاله آموزشی نحوه ی پیاده سازی این اعتبارسنجی رو خدمتتون آموزش میدم.

برای اینکار یه فرم و یک باکس برای نمایش خطا در نظر میگیریم. زمانی که شما فیلد متنی فرم رو پر می کنید با زدن دکمه ارسال خطایی نمایش داده نمیشه و عمل ارسال انجام میشه اما اگر فیلد متنی توسط کاربر پر نشه و بخواد فرم رو خالی ارسال کنه یک باکس قرمز خطا بهش نمایش داده میشه.

پس یه فرم ایجاد می کنیم:

خیلی ساده ، شامل یک فیلد متنی و یک دکمه ثبت اطلاعات .

برای فیلد متنی و دکمه ثبت اطلاعات هر کدوم یک id اختصاص میدیم تا تو دستورات جی کوئری با استفاده از id ها و شناسه هاشون اونهارو صدا بزنیم.

برای نمایش پیغام خطا هم یک باکس خطا در نظر میگیریم:

خوب برای ابتدای کار که باکس خطا باید پنهان باشه و نمایش داده نشه. برای همین خاصیت زیر رو به کلاس MessageBox اختصاص میدیم:

با display:none باکس خطارو در مراحل اولیه پنهان می کنیم. در اصل هم باید پنهان باشه تا زمانی که کاربر فیلد رو کامل نکرد به کار نمایش داده بشه.

حالا با جی کوئری میگیم اگر که روی دکمه با شناسه button کلیک شد، مقدار فیلد متنی با شناسه ی txtContent رو بگیر و چک کن. اگر مقدار این فیلد خالی بود باکس رو به کاربر نمایش بده. اگر که خالی نبود پس کاری نداشته باش و بذار اطلاعات فرم ارسال بشه. پس کد زیر رو مینویسیم:

در ابتدای کار با رویداد click ، کلیک روی دکمه رو چک می کنیم و میگیم اگر روی دکمه کلیک شده بود وارد عملیات بشو. در خط بعد مقدار txtContent رو میگیریم و در متغییر content ذخیره می کنیم. در شرطی هم که ملاحظه می کنید گفتیم اگر مقدار فیلد خالی بود وارد عملیات شرط بشو . در شرط هم گفتیم که باکس خطا رو به کاربر نمایش بده.

از رویداد fadeIn استفاده کردیم که ظاهر شدن باکس با افکت انجام بشه.

تا اینجا کار ما تمام شدست . حالا میخوایم بگیم باکس رو که به کاربر نمایش داد بعد از ۲ ثانیه دوباره باکس خطا پنهان بشه. برای اینکار کد رو به صورت زیر تغییر میدیم:

از رویداد delay استفاده کردیم و گفتیم پس از ظاهر شدن باکس بعد از ۲ ثانیه رویداد fadeout رو اجرا کن و باکس رو پنهان کن. با این عملیات کاربر با زدن دکمه باکس رو میبینه و بعد از ۲ ثانیه بصورت خودکار باکس پنهان میشه.

 

خوب دوستان عزیز امیدوارم که این آموزش براتون مفید بوده باشه.

میتونید دموی آنلاین این پروژه رو ببینید.

موفق و پاینده باشید.

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۱

  • درود

    خسته نباشید آقای همت یار، آموزش خوبی بود ، فقط یه سوال اگر بخوایم اینو به صورت نواری زیر هدر نشون بده کد رو چطور باید تغییر بدیم ؟

    – منتظر آموزش تبدیل PSD به کد هم هستیما ! مرسی

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

  • ممنون از آموزش خوبتان.اما من هر چقدر امتحان کردم پیام ظاهر نشد میشه راهنمایی بیشتر کنید یا بی زحمت کدهاشو برای دانلود بزارید

    • سلام دوست عزیز
      فایل رو برای آپلود قرار میدم.
      موفق و پاینده باشید

  • سلام.ممنون بابت آموزشتون. ممکن بود نحوه ارسال input type=”file” رو با ajax آموزش بدید
    یعنی فایل رو بکشیم تو جی کوییری و با ajax بفرستیم به پیج php

    • سلام دوست عزیز
      بله مشکلی نداره براتون یه آموزش تهیه می کنم و در سایت قرار میدم. امکان داره تو ماهنامه هفتم این آموزش رو منتشر کنم.
      فقط به دلیل مشغله مقداری زمان خواهد برد.
      موفق و پاینده باشید.

  • سلام مجدد
    سوالی رو که امروز پرسیدم حتی اجازه ی نمایش بهش ندادید
    امیدوارم دلیلش ناتوانی در پاسخ نبوده باشه
    شخصا آخرین باری بود که تو سایتتون اومدم
    Good Luck

    • سلام ،

      ۱ : اگر در جریان باشید شبهای محرم هست و عموما مردم دنبال عزاداری و هیئات و … هستند و مدیران سایت ها هم از این جریان جدا نیستند و در این روزها زمان برای بررسی دیدگاه ها ، پاسخ دادن و … کم هست .

      ۲ : چندین مرتبه در بخش های مختلف مطرح شده که اگر سوالی دارید فقط در ask.iranweblearn.com مطرح کنید تا مدیران یا سایر کاربران پاسخ سوال شما رو بدن . مسلما دیدگاه در نوشته ها مثل سیستم پشتیبانی و تیکتی نیست که تعهد باشه کمتر از ۲۴ ساعت پاسخ داده بشه 🙂 اصولا هر موقع نویسنده اموزش زمان داشته باشه دیدگاه ها رو بررسی میکنه و پاسخ های لازم رو میده .

      ۳ :آموزش های مختلفی رو در سطوح مختلف تا کنون در سایت تدریس کردند و سوال شما هم نیاز به یک آموزش و یک نوشته آموزشی داره که سر جای خودش قابل بررسیست و مطمئنا از توانایی ایشون نیز خارج نیست فقط کافی مقداری صبر پیشه کنید تا ایشون خودشون پاسخ گوی شما باشند .

      از اینکه به سایت ما مراجعه کردید و ما رو برای حل مشکلات خودتون در طراحی وب انتخاب کردید متشکریم امیدواریم باز هم شاهد دیدگاه های ارزشمند شما و البته با کمی صبر و حوصله بیشتر باشیم 🙂

      تشکر

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

    • سلام دوست عزیز
      باید type دکمه ی submit رو button قرار بدید. و بصورت ایجکسی کار کنید.
      اگر به این صورت نمیتونید انجام بدید. زمانی که دستورات به سمت php ارسال میشه در کدهای php تون validation رو انجام بدید و پیغام خطارو نمایش بدید.
      موفق و پاینده باشید.

    • من از این راه تابحال استفاده نکردم و معمولا از ایجکس استفاده میکنم. اگر تست کردید و موردی نداشته که خیلی هم عالی .
      اما ولید کردن سمت سرور خیلی مطمئن تر از jquery و سمت کلاینت هست.
      موفق و پاینده باشید.

    • سلام دوست عزیز
      تو جی کوئری کد زیر رو
      $(‘.MessageBox’).fadeIn(‘slow’);
      به کد زیر تغییر میدید
      $(‘#txtContent’).val(‘لطفا متن را وارد نمایید’);
      موفق و پاینده باشید

    • سلام دوست عزیز
      اعتبارسنجی بصورت جی کوئری (سمت کلاینت) و php (سمت سرور) رو طی یک مقاله تو سایت منتشر میکنم.
      موفق وپاینده باشید

  • با سلام خدمت شما
    آقای همت یار برای نمایش خطای خالی بودن از این دستوری که گفتید استفاده کردم حالا برای تغیر اندازه و سایز پیام چه دستوری باید استفاده کرد . $(‘#T2 ‘).val(‘الزامی ‘);

    • سلام دوست عزیز
      اون مربوط میشه به css که هر استایلی خواستید به باکس نمایش پیغام بدید.
      موفق و پاینده باشید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین