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

چاپ

آموزش اعتبار سنجی یا Validation فرم، در جوملا

در جوملا قابلیت اعتبارسنجی فرم ها هم سمت کاربر (Client) و هم سمت سرور وجود دارد.

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

اعتبار سنجی سمت کاربر - Client-side validation

این کار از طریق JavaScript زمانی که کاربر در حال پر کردن فیلدهاست و قبل از اینکه فرم submit شود انجام می شود.

اعتبار سنجی سمت سرور - Server-side validation

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

برای کسب اطلاعات بیشتر درباره قوانین اعتبار سنجی فرم در جوملا به لینک Form validation مراجعه فرمایید.


در پایان این آموزش خواهید توانست

بعد از نصب این قسمت از آموزش، خواهید دید که:

آموزش اعتبار سنجی فرم در جوملا

1- از منوی کامپوننت ها، روی گزینه "کامپوننت احوال پرسی" کلیک کنید.

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


فایل نصب کامپوننت

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

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

توجه: در انتهای این بیاموز، فایل نصب کامپوننت برای دانلود قرار داده شده است.


اعتبار سنجی فیلد پیام (greeting)

زمانی فیلد پیام (greeting) معتبر است که دو قانون زیر در مورد آن صادق باشد:

  1. خالی نباشد.
  2. شامل کاراکترهای عددی نباشد.

اعتبار سنجی فیلد پیام (greeting) در هشت مرحله:

  1. اصلاح Layout فرم ویرایش
  2. اصلاح فایل xml. فرم ویرایش
  3. اعتبار سنجی فیلد زمانی که محتوای آن تغییر می کند
  4. اعتبار سنجی فرم زمانی که روی دکمه "ذخیره" کلیک می شود
  5. اضافه کردن فایل JavaScript به view
  6. پیاده سازی تابع ()getScript در model متناظر view
  7. اعتبار سنجی فرم، سمت سرور
  8. اصلاح فایل helloworld.xml

مرحله 1- اصلاح Layout فرم ویرایش

در فایل admin/views/helloworld/tmpl/edit.php تغییرات زیر را اعمال نمایید:

admin/views/helloworld/tmpl/edit.php

<?php
// No direct access
defined('_JEXEC') or die('Restricted access');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id='.(int) $this->item->id); ?>"
      method="post" name="adminForm" id="helloworld-form" class="form-validate">
        <fieldset class="adminform">
                <legend><?php echo JText::_( 'COM_HELLOWORLD_HELLOWORLD_DETAILS' ); ?></legend>
                <?php foreach($this->form->getFieldset() as $field): ?>
                        <?php if (!$field->hidden): ?>
                                <?php echo $field->label; ?>
                        <?php endif; ?>
                        <?php echo $field->input; ?>
                <?php endforeach; ?>
        </fieldset>
        <div>
                <input type="hidden" name="task" value="helloworld.edit" />
                <?php echo JHtml::_('form.token'); ?>
        </div>
</form>

در کد بالا توجه داشته باشید که کلاس "form-validate" برای تگ <form> تنظیم شده است و همچنین با صدا زدن متد زیر، کدهای JavaScript جوملا برای اعتبار سنجی به فرم اضافه می شوند.

JHTML::_('behavior.formvalidation');


مرحله 2- اصلاح فایل xml. فرم ویرایش

در فایل admin/models/forms/helloworld.xml تغییرات زیر را اعمال نمایید:

admin/models/forms/helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- $Id: helloworld.xml 51 2010-11-22 01:33:21Z chdemko $ -->
<form
    addrulepath="/administrator/components/com_helloworld/models/rules">
    <fieldset>
        <field
            name="id"
            type="hidden"
        />
        <field
            name="greeting"
            type="text"
            label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
            description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
            size="40"
            class="inputbox validate-greeting"
            validate="greeting"
            required="true"
            default=""
        />
    </fieldset>
</form>

توضیح:

  1. گزینه class را با مقدار "validate-greeting" تنظیم می کنیم.
  2. برای اینکه در فرم ویرایش مشخص کنیم که فیلد پیام یا greeting الزامی است، باید  گزینه required را با مقدار "true" تنظیم نمایید.
  3. گزینه validate نیز باید با مقدار "greeting" تنظیم شود. در ادامه متوجه خواهید شد که برای اعتبارسنجی فرم سمت سرور از این مقدار که معادل یک فایل php است استفاده خواهد شد.

توجه: برای تنظیم گزینه class در فایل بالا، از مقادیر زیر نیز می توانید استفاده کنید:


مرحله 3- اعتبار سنجی فیلد زمانی که محتوای آن تغییر می کند

با ویرایشگر دلخواهتان فایل admin/models/forms/helloworld.js را با محتوای زیر ایجاد نمایید:

admin/models/forms/helloworld.js

window.addEvent('domready', function() {
    document.formvalidator.setHandler('greeting',
        function (value) {
            regex=/^[^0-9]+$/;
            return regex.test(value);
    });
});

کد JavaScript بالا یک رسیدگی کننده یا handler جدید به اعتبارسنج جوملا اضافه می کند البته برای فیلدهایی که کلاس "validate-greeting" برای آنها تنظیم شده است. هر زمان که فیلد پیام یا greeting تغییر می کند، handler اجرا می شود و فیلد greeting اعتبار سنجی می شود.

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


مرحله 4- اعتبار سنجی فرم زمانی که روی دکمه "ذخیره" کلیک می شود

با ویرایشگر دلخواهتان فایل  admin/views/helloworld/submitbutton.js را با محتوای زیر ایجاد نمایید:

admin/views/helloworld/submitbutton.js

Joomla.submitbutton = function(task)
{
    if (task == '')
    {
        return false;
    }
    else
    {
        var isValid=true;
        var action = task.split('.');
        if (action[1] != 'cancel' && action[1] != 'close')
        {
            var forms = $$('form.form-validate');
            for (var i=0;i<forms.length;i++)
            {
                if (!document.formvalidator.isValid(forms[i]))
                {
                    isValid = false;
                    break;
                }
            }
        }
    
        if (isValid)
        {
            Joomla.submitform(task);
            return true;
        }
        else
        {
            alert(Joomla.JText._('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE','Some values are unacceptable'));
            return false;
        }
    }
}

تابع JavaScript بالا تمام فرم هایی که کلاس سی اس اس "form-validate" برای آنها تنظیم شده است را اعتبار سنجی می کند. توجه داشته باشید که در صورت معتبر نبودن فرم پیام "COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE" که توسط سیستم زبان جوملا ترجمه خواهد شد، نمایش داده می شود.

فایل زبان مربوط به ترجمه فارسی کامپوننت، مطابق زیر تغییر خواهد کرد:

admin\language\fa-IR\fa-IR.com_helloworld.ini

COM_HELLOWORLD_ADMINISTRATION="کامپوننت احوال پرسی - مدیریت"
COM_HELLOWORLD_HELLOWORLD_CREATING="کامپوننت احوال پرسی - ایجاد"
COM_HELLOWORLD_HELLOWORLD_EDITING="کامپوننت احوال پرسی - ویرایش"
COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE="بعضی از مقادیر فرم قابل قبول نمی باشد"
COM_HELLOWORLD_HELLOWORLD_DETAILS="جزئیات"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="لطفاً پیام مورد نظرتان را انتخاب نمایید"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="انتخاب پیام"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="متن احوال پرسی"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="شناسه"
COM_HELLOWORLD_MANAGER_HELLOWORLDS="مدیریت کامپوننت احوال پرسی"
COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="مدیریت کامپوننت احوال پرسی: ثبت یک پیام"
COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="مدیریت کامپوننت احوال پرسی: ویرایش یک پیام"
COM_HELLOWORLD_N_ITEMS_DELETED_1="یک پیغام حذف شد"
COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d پیام حذف شد"
COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL="پیام"
COM_HELLOWORLD_HELLOWORLD_GREETING_DESC="لطفاً پیام مورد نظرتان را وارد کنید"

مرحله 5- اضافه کردن فایل JavaScript به view

بهترین مکان برای اضافه کردن فایل JavaScript اعتبارسنجی، در View متناظر آن است. در مورد این مثال فایل admin/views/helloworld/view.html.php  خواهد بود.

بنابراین با استفاده از متد ()addScript فایل JavaScript اعتبار سنجی را به view مورد نظرمان، مطابق زیر اضافه می کنیم:

admin/views/helloworld/view.html.php 

<?php

/**
 * @version        $Id: view.html.php 51 2010-11-22 01:33:21Z chdemko $
 * @package        Joomla16.Tutorials
 * @subpackage    Components
 * @copyright    Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
 * @author        Christophe Demko
 * @link        http://joomlacode.org/gf/project/helloworld_1_6/
 * @license        License GNU General Public License version 2 or later
 */

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

// import Joomla view library
jimport('joomla.application.component.view');

/**
 * HelloWorld View
 */
class HelloWorldViewHelloWorld extends JView
{
    /**
     * display method of Hello view
     * @return void
     */
    public function display($tpl = null)
    {
        // get the Data
        $form = $this->get('Form');
        $item = $this->get('Item');
        $script = $this->get('Script');

        // Check for errors.
        if (count($errors = $this->get('Errors')))
        {
            JError::raiseError(500, implode('<br />', $errors));
            return false;
        }
        // Assign the Data
        $this->form = $form;
        $this->item = $item;
        $this->script = $script;

        // Set the toolbar
        $this->addToolBar();

        // Display the template
        parent::display($tpl);

        // Set the document
        $this->setDocument();
    }

    /**
     * Setting the toolbar
     */
    protected function addToolBar()
    {
        JRequest::setVar('hidemainmenu', true);
        $isNew = ($this->item->id == 0);
        JToolBarHelper::title($isNew ? JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW') : JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT'), 'helloworld');
        JToolBarHelper::save('helloworld.save');
        JToolBarHelper::cancel('helloworld.cancel', $isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE');
    }
    /**
     * Method to set up the document properties
     *
     * @return void
     */
    protected function setDocument()
    {
        $isNew = ($this->item->id < 1);
        $document = JFactory::getDocument();
        $document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING') : JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
        $document->addScript(JURI::root() . $this->script);
        $document->addScript(JURI::root() . "/administrator/components/com_helloworld/views/helloworld/submitbutton.js");
        JText::script('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE');
    }
}

این View حالا:


مرحله 6- پیاده سازی تابع ()getScript در مدل متناظر view

آخرین مرحله اعتبارسنجی فرم سمت کاربر، پیاده سازی تابع ()getScript در مدل متناظر ویوی helloworld یعنی HelloWorldModelHelloWorld است:

admin/models/helloworld.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');

// import Joomla modelform library
jimport('joomla.application.component.modeladmin');

/**
 * HelloWorld Model
 */
class HelloWorldModelHelloWorld extends JModelAdmin
{
    public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array())
    {
        return JTable::getInstance($type, $prefix, $config);
    }
    public function getForm($data = array(), $loadData = true)
    {
        // Get the form.
        $form = $this->loadForm('com_helloworld.helloworld', 'helloworld', array('control' => 'jform', 'load_data' => $loadData));
        if (empty($form))
        {
            return false;
        }
        return $form;
    }
    /**
     * Method to get the script that have to be included on the form
     *
     * @return string    Script files
     */
    public function getScript()
    {
        return 'administrator/components/com_helloworld/models/forms/helloworld.js';
    }
    protected function loadFormData()
    {
        // Check the session for previously entered form data.
        $data = JFactory::getApplication()->getUserState('com_helloworld.edit.helloworld.data', array());
        if (empty($data))
        {
            $data = $this->getItem();
        }
        return $data;
    }
}


مرحله 7- اعتبار سنجی فرم سمت سرور

اعتبار سنجی فرم سمت سرور با ارثبری از JControllerForm انجام می شود.

همان طور که در مرحله 2 متوجه شدید، در فایل admin/models/forms/helloworld.xml مقدار گزینه validate را با مقدار "greeting" تنظیم کردیم. با توجه به این مقدار جوملا بدنبال فایلی با نام greeting.php در آدرس models/rules می گردد.

بنابراین در فایل نصب کامپوننت و در شاخه admin/models یک پوشه با نام rules بسازید و فایل greeting.php با محتوای زیر را در آن قرار دهید:

admin/models/rules/greeting.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');

// import Joomla formrule library
jimport('joomla.form.formrule');

/**
 * Form Rule class for the Joomla Framework.
 */
class JFormRuleGreeting extends JFormRule
{
    /**
     * The regular expression.
     *
     * @access    protected
     * @var        string
     * @since    1.6
     */
    protected $regex = '^[^0-9]+$';
}

توجه داشته باشید که در کد بالا هیچ تابعی وجود ندارد و کلاس JFormRuleGreeting از JFormRule ارثبری دارد. (JFormRule در آدرس libraries/joomla/form /rule.php قرار دارد). تمام چیزی که در اینجا نیاز داریم مشخص کردن مقدار عبارت منظم است.


مرحله 8- اصلاح فایل helloworld.xml

اگر این آموزش را از ابتدا دنبال فرموده باشید، فقط کافی است تغییرات زیر را در فایل xml، اعمال نمایید: (رنگ سبز)

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- $Id: helloworld.xml 14 2009-11-02 18:35:20Z chdemko $ -->
<extension type="component" version="1.6.0" method="upgrade">

    <name>COM_HELLOWORLD</name>
    <!-- The following elements are optional and free of formatting conttraints -->
    <creationDate>November 2009</creationDate>
    <author>beyamooz</author>
    <authorEmail>این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید</authorEmail>
    <authorUrl>https://beyamooz.com</authorUrl>
    <copyright>Copyright Info</copyright>
    <license>License Info</license>
    <!--  The version string is recorded in the components table -->
    <version>0.0.11</version>
    <!-- The description is optional and defaults to the name -->
    <description>COM_HELLOWORLD_DESCRIPTION</description>

    <install> <!-- Runs on install -->
        <sql>
            <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
        </sql>
    </install>
    <uninstall> <!-- Runs on uninstall -->
        <sql>
            <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
        </sql>
    </uninstall>
    <update> <!-- Runs on update; New in 1.6 -->
        <schemas>
            <schemapath type="mysql">sql/updates/mysql</schemapath>
        </schemas>
    </update>

    <!-- Site Main File Copy Section -->
    <!-- Note the folder attribute: This attribute describes the folder
        to copy FROM in the package to install therefore files copied
        in this section are copied from /site/ in the package -->
    <files folder="site">
        <filename>index.html</filename>
        <filename>helloworld.php</filename>
        <filename>controller.php</filename>
        <folder>views</folder>
        <folder>models</folder>
        <folder>language</folder>
    </files>

    <media destination="com_helloworld" folder="media">
        <filename>index.html</filename>
        <folder>images</folder>
    </media>

    <administration>
        <!-- Administration Menu Section -->
        <menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
        <!-- Administration Main File Copy Section -->
        <!-- Note the folder attribute: This attribute describes the folder
            to copy FROM in the package to install therefore files copied
            in this section are copied from /admin/ in the package -->
        <files folder="admin">
            <!-- Admin Main File Copy Section -->
            <filename>index.html</filename>
            <filename>helloworld.php</filename>
            <filename>controller.php</filename>
            <!-- SQL files section -->
            <folder>sql</folder>
            <!-- tables files section -->
            <folder>tables</folder>
            <!-- models files section -->
            <folder>models</folder>
            <!-- views files section -->
            <folder>views</folder>
            <!-- controllers files section -->
            <folder>controllers</folder>
        </files>

        <languages folder="admin">
            <language tag="en-GB">language/en-GB/en-GB.com_helloworld.ini</language>
            <language tag="en-GB">language/en-GB/en-GB.com_helloworld.sys.ini</language>
            <language tag="fa-IR">language/fa-IR/fa-IR.com_helloworld.ini</language>
            <language tag="fa-IR">language/fa-IR/fa-IR.com_helloworld.sys.ini</language>
        </languages>
    </administration>

</extension>

دریافت فایل کامپوننت آموزشی Hello World (بخش یازدهم - اعتبارسنجی فرم در جوملا)

ایجاد کننده:www.beyamooz.com

خرید فایل:دانلود فایل کامپوننت Hello World
حجم فایل: 4 کیلو بایت
قیمت: 1000 تومان

تمام درآمدها صرف پیشرفت بیاموز خواهد شد.