خانه مقالات 123 کدنویسی خدمات دانلود پشتیبانی تماس با ما درباره ما

اضافه کردن اعتبارسنجی فیلدهای ورودی به فرم های وردپرس

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

 

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

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

پیام بخش‌های لازم را پر نمایید

پیام بخش‌های لازم را پر نمایید

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

شاید یکی از راه حل های برای این مشکل ، اضافه کردن ولیدیتور برای هر کدوم از فیلدهای مورد نیاز باشه . به اینصورت که اگر هرکدوم از فیلدها خالی بودن، توی همون صفحه پیام بده .

برای این کار از جی کوئری و این پلاگین vlaidate  استفاده می کنیم که لینک وب سایتش این هست :
https://jqueryvalidation.org

پلاگین ولیدیتور جی کوئری

پلاگین ولیدیتور جی کوئری

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

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

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

البته برای همه متدها مثل ایمیل و لینک هم پیام های پیش فرضی داره که اگر داخل اسکریپت اگر پیام سفارشی تعریف نکرده باشیم همون پیام پیش فرض متناسب با اون ارور رو نمایش میده.

برای دانلود این پکیج jquery.validate.js از گیت هاب می تونید روی همین متن کلیک کنید (نسخه فعلی 1.9.3 )

برای مشاهده مستندات این پلاگین jquery.validate.js هم می تونید اینجا کلیک کنید و راهنما  و مستنداتش رو بخونید

برای مشاهده دموی این پلاگین  jquery.validate و اینکه چطور کار می کنه اول دموی jquery.validate  رو ببینید و تست کنید.

دموی jquery.validate

دموی jquery.validate

 

اضافه کردن jquery.validate به قالب وردپرس

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

 

function comment_validate_scripts() {
    if(is_singular()){
    wp_enqueue_style( 'comment_validate', get_stylesheet_directory_uri(). '/assets/css/comment_validate.css' );
    wp_enqueue_script( 'form_validate', get_stylesheet_directory_uri() . '/assets/js/form_validate/jquery.validate.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'comment_validate', get_stylesheet_directory_uri() . '/assets/js/form_validate/comment_validate.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'comment_validate_scripts' );

توی کد بالا که به  انتهای فایل functions.php  اضافه کردیم گفتیم که این فایل ها رو فقط در صفحات سینگولار که شامل برگه ها و صفحات نوشته ها و یا اگر ووکامرس نصب هست توی صفحات محصولات هم فراخوانی و به فوتر اضافه بشه. البته در این مثال فایل هایی رو که از گیت هاب دانلود کردیم رو توی این فولدر assets/js/form_validate آپلود کردیم که شما بسته به قالب سایتتون ممکنه متفاوت باشه و نیاز به تغییر داشته باشه .

فایل های ولیدیتور جی کوئری

فایل های ولیدیتور جی کوئری

 

چون می خواستیم از این پکیج برای اعتبارسنجی فیلدهای کامنت استفاده کنیم اسم فایل اسکریپت خودمون رو comment_validate.js گذاشتیم که قرار هست کد خودمون رو توش اضافه کنیم .

 

$(document).ready(function(){
// validate the comment form when it is submitted
// Wait for the DOM to be ready
jQuery(function($) {
  $('#commentform').validate({
    rules: {
      author: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      },
      comment: {
        required: true,
        minlength: 20
      }
    },
    messages: {
      author: "لطفا نام خود را وارد کنید",
      email: "لطفا ایمیل خود را وارد کنید",
      comment: "لطفا متن دیدگاه خود را وارد کنید"
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      element.after(error);
    }
  });
});
});

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

در قسمت rules ما تعیین می کنیم که می خوایم کدوم ورودی ها یا همون input  هامون اعتبارسنجی بشن و براشون می تونیم حداقل طول کارکتر و یا حداکثر طول کارکتر و یا هر دو رو تعریف کنیم  . برای ورودی های select می تونیم min , max تعریف کنیم .

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

توی لاین 20 یعنی messages ما اومدیم پیام های دلخواه متناظر با هر کدوم از فیلدها رو وارد کردیم که به جای پیام پیش فرض پلاگین نمایش بده .  البته توی فولدر localization این پلاگین هم زبان فارسی هست و می تونید پیام های فارسی ارورها رو مشاهده کنید که اینها هستن:

 

$.extend( $.validator.messages, {
	required: "تکمیل این فیلد اجباری است.",
	remote: "لطفا این فیلد را تصحیح کنید.",
	email: "لطفا یک ایمیل صحیح وارد کنید.",
	url: "لطفا آدرس صحیح وارد کنید.",
	date: "لطفا تاریخ صحیح وارد کنید.",
	dateFA: "لطفا یک تاریخ صحیح وارد کنید.",
	dateISO: "لطفا تاریخ صحیح وارد کنید (ISO).",
	number: "لطفا عدد صحیح وارد کنید.",
	digits: "لطفا تنها رقم وارد کنید.",
	creditcard: "لطفا کریدیت کارت صحیح وارد کنید.",
	equalTo: "لطفا مقدار برابری وارد کنید.",
	extension: "لطفا مقداری وارد کنید که",
	alphanumeric: "لطفا مقدار را عدد (انگلیسی) وارد کنید.",
	maxlength: $.validator.format( "لطفا بیشتر از {0} حرف وارد نکنید." ),
	minlength: $.validator.format( "لطفا کمتر از {0} حرف وارد نکنید." ),
	rangelength: $.validator.format( "لطفا مقداری بین {0} تا {1} حرف وارد کنید." ),
	range: $.validator.format( "لطفا مقداری بین {0} تا {1} حرف وارد کنید." ),
	max: $.validator.format( "لطفا مقداری کمتر از {0} وارد کنید." ),
	min: $.validator.format( "لطفا مقداری بیشتر از {0} وارد کنید." ),
	minWords: $.validator.format( "لطفا حداقل {0} کلمه وارد کنید." ),
	maxWords: $.validator.format( "لطفا حداکثر {0} کلمه وارد کنید." )
} );

روش تعریف متد جدید به اینصورت هست که داخل اسکریپت میام از jQuery.validator.addMethod استفاده می کنیم  به طور مثال یک مشکلی که ولیدیتور ایمیل این پلاگین داره این هست که فقط هر رشته متنی که علامت @  داشته باشه رو به عنوان ایمیل می شناسه مثلا این رو info@wordpresskar و این اشتباه هست و برای همین یه متد جدید تعریف می کنیم که طبق متد ما ایمیل ها رو اعتبار سنجی کنه

jQuery.validator.addMethod("validate_email", function(value, element) {

    if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
        return true;
    } else {
        return false;
    }
}, "Please enter a valid Email.");

$('#checkform').validate({
    rules: {
        email: {
            validate_email: true
        },
    }
});

 

jQuery.validator.addMethod("validate_email", function(value, element) {
    if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
        return true;
    } else {
        return false;
    }
}, "Please enter a valid Email.");

برای فیلدهای ورودی مخفی مثل rating woocommerce این خط کد رو به اسکریپت اضافه می کنیم :

 ignore:[],

 

بعد از اینکه همه این کارها انجام شد نوبت تست روی سایت خودمون هست :

 

نمونه اعتبارسنجی فیلدهای ووردی کامنت وردپرس

نمونه اعتبارسنجی فیلدهای ووردی کامنت وردپرس

برای هر کدوم از ارورهایی که در زیر فیلدها نمایش داده میشه می تونیم استایل خودمون رو اضافه کنیم . برای همین توی فایلی که قبلا توی فانکشن تعریف کرده بودیم یعنی comment_validate.css میایم این استایل رو اضافه می کنیم تا نمایش بهتری داشته باشه .

 

#commentform [id$='error']{
border: 1px solid #ccc;
background: #f7f7b9;
width: auto;
margin: 10px 0 10px 10px;
padding: 5px;
border-radius: 5px;
color: #000 !important;
width: 85%;}

و مجدد تست می کنیم و نتیجه نهایی اعتبارسنجی فرم کامنت.

 

نتیجه نهایی اعتبارسنجی فرم کامنت

نتیجه نهایی اعتبارسنجی فرم کامنت

(0) دیدگاه برای این پست ثبت شده
دیدگاه خود را بفرستید
  1. اولین نفری باشید که دیدگاه خود را ثبت می کند!
« هوک های سبد خرید ووکامرس
رفتن به کامنت بعد از ارسال کامنت »
با کلیک بر روی هر کدام از کلمات می توانید مطالب مشابه را مشاهده کنید:

comment validate

comment validatore

jquery.validate

jquery.validate.js

jQuery.validator.addMethod

rating woocommerce