اعتبار سنجی فرم با HTML5
سلام خدمت همه دوستان عزیز،
در این پست قصد دارم اعتبارسنجی کردن فرم ها(Form validation) توسط HTML5 را به شما معرفی کنم.
اضافه شدن نوع فیلد :
- color : فیلدی برای انتخاب رنگ ایجاد میکنه(color picker)
- date : فیلدی ایجاد برای انتخاب تاریخ(date picker)
- datetime : دریافت تاریخ و زمان
- email : فیلدی که فقط یک آدرس ایمیل معتبر را دریافت می کند.
- month : فیلدی برای دریافت ماه
- number : فیلدی که فقط مقادیر عددی دریافت میکند
- range :فیلدی برای انتخاب یک رنج
- search : فیلدی برای ایجاد جستجو ایجاد میکنه که برای ارسال فرم هم نیازی به دکمه ارسال نیست.
- tel : فیلدی برای دریافت شماره تلفن معتبر
- time : فیلدی برای انتخاب زمان
- url :فیلدی برای دریافت یک url معتبر
- week : اینم خودتون می تونید حدس برنید 🙂
مثال :
۱ | <input type="email" /> |
در کد بالا فیلدی وجود دارد که فقط یک ایمیل معتبر را دریافت میکند و اگه مقدار وارد شده آدرس ایمیل نباشد هشدار داده و از ارسال(submit) فرم جلوگیری می کند.
مثال برای range :
۱ | <input type="range" min="۱" max="۱۰" /> |
اعتبارسنجی فیلد با استفاده پترن ها
شما به راحتی می تونید با استفاده از پترن ها ورودی های کاربر رو فیلتر کنید :
۱ | <input type="text" pattern="[a-zA-Z]+" title="Only enter letters" /> |
کد بالا فقط حروف a تا z را قبول می کند.
جلوگیری از خالی بودن فیلد
قبل از این شما وقتی می خواستید کاری کنید که کاربر حتما مقداری را در فیلد وارد کند باید با استفاده از کد های جاوا اسکریپت این کار رو انجام میدادید اما HTML5 کار شما رو راحت کرده کافیه از صفت required استفاده کنید :
۱ | <input type="text" required="true" /> |
غیر فعال کردن اعتبارسنجی HTML5
شاید شما زمانی بخواهید که اعتبارسنجی های HTML5 را غیر فعال کنید، برای این کار کافیه از صفت novalidate در تگ فرم استفاده کنید:
۱ ۲ ۳ | <form method="post" action="" novalidate> ... </form> |
