اعتبارسنجی سمت کاربر با افزونه jQuery Validation

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

اما اعتبارسنجی سمت کاربر باعث می‌شود که تجربه کاربری بهتری را به کاربر داد. به این صورت دیگر کاربر مجبور نیست که کل تنظیمات و موارد را در یک برگه یا یک فرم به سرور ارسال کند و منتظر بماند، با استفاده از روش اعتبارسنجی سمت مشتری می‌توانید سریعا اشتباه‌های مشتری را در همان زمان هشدار بدهید و به آن‌ها متوجه سازید که کدام ورودی را اشتباه نوشته است. مرورگرهای مدرن اعتبارسنجی سمت کاربر را می‌توانند از طریق فرم‌های مربوط به سندهای HTML5 انجام دهند. اما این موارد محدودیتی برای استایل‌دهی، موقعیت‌دهی و برچسب‌گذاری دارند.

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

jQuery validation یک پلاگین جی‌کوئری است که اعتبارسنجی فرم‌های HTML را بسیار ساده‌تر می‌کند.. قصد داریم در این مطلب نگاهی سریع به آن بیاندازیم.

نصب کردن

راه‌های مختلفی برای نصب این پلاگین وجود دارد:

دانلود از طریق گیت‌هاب
استفاده از یک CDN
استفاده از bower
$ bower install jquery-validation –save

برای ساده‌سازی روند این آموزش با مورد دوم، از CDN استفاده می‌کنیم.

استفاده

فایل HTML که ما در اختیار داریم به شکل زیر است، در انتهای تگ body ما اسکریپت‌های مربوط به پلاگین جی‌کوئری را از طریق CDN اضافه کرده‌ایم. همچنین در بخش اصلی کدها، فرم‌هایی در نظر گرفته شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Learn jQuery Validation</title>
</head>
<body>
    <div class="container">
        <h1>Learn jQuery Validation</h1>
        <form method="post">
            <div>
                <label for="first-name">First Name:</label>
                <input type="text" id="first-name" name="first_name">
            </div>
            <div>
                <label for="last-name">Last Name:</label>
                <input type="text" id="last-name" name="last_name">
            </div>
            <div>
                <label for="email-address">Email:</label>
                <input type="text" id="email-address" name="email_address">
            </div>
            <div>
                <button type="submit" id="submit-cta">Submit</button>
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js)></script>
</body>
</html>

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

<form method="post">
    <div>
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first_name" required>
    </div>
    <div>
        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last_name" required>
    </div>
    <div>
        <label for="email-address">Email:</label>
        <input type="text" id="email-address" name="email_address" required>
    </div>
    <div>
        <button type="submit" id="submit-cta">Submit</button>
    </div>
</form>

این کار باعث می‌شود که روند اعتبارسنجی در مرورگرهایی که HTML5 را پشتیبانی می‌کنند. همچنین اضافه کردن قسمت پایینی قابلیت اعتبارسنجی جی‌کوئری را نیز فعال می کند.

$('form').validate();

validate() متدی از پلاگین جی‌کوئری است و به ما کمک می‌کند که در آینده بتوانیم فرم را شخصی‌سازی نماییم. در رابطه با این موضوع بعدا بیشتر صحبت خواهیم کرد.

در حالت پیشفرض مواقعی که فرم را به صورت خالی ارسال می‌کنید، مرورگر به شما خطایی مانند «This field is required» را می‌دهد. می‌توانید از طریق خاصیت data-msg-required این مورد را سفارشی‌سازی کنید. برای اینکه بهتر متوجه شوید می‌توانید کدهای زیر را مشاهده نمایید:

<form method="post">
    <div>
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first_name" required data-msg-required="First name is required.">
    </div>
    <div>
        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last_name" required data-msg-required="Last name is required.">
    </div>
    <div>
        <label for="email-address">Email:</label>
        <input type="text" id="email-address" name="email_address" required data-msg-required="Email is required.">
    </div>
    <div>
        <button type="submit" id="submit-cta">Submit</button>
    </div>
</form>

یک نمونه بسیار ساده در عین حال دقیق از این موارد را می‌توانید در پیشنمایش زیر مشاهده کنید:

یک راه جایگزین برای انجام این کار این است که آرگومان‌های متد Validate را تغییر دهیم و از طریق آن پیام‌ها را نمایش دهیم. برای اینکار به صورت زیر عمل کنید:

قالب HTML مورد نیاز:

<form method="post">
    <div>
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first_name">
    </div>
    <div>
        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last_name">
    </div>
    <div>
        <label for="email-address">Email:</label>
        <input type="text" id="email-address" name="email_address">
    </div>
    <div>
        <button type="submit" id="submit-cta">Submit</button>
    </div>
</form>

قالب جاوااسکریپتی لازم برای فعال‌سازی اعتبارسنجی و قرار دادن پیام‌های سفارشی مربوط به اعتبارسنجی:

$('form').validate({
    rules: {
        'first_name': required,
        'last_name': required,
        'email_address': {
            required: true,
            email: true
        }
    },
    messages: {
        'first_name': 'First name is required.',
        'last_name': 'Last name is required.',
        'email_address': {
            required: 'Email is required.',
            email: 'A valid email is required.'
        }
    }
});

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

متدvalidate() خاصیت‌های بسیار دیگری را نیز در خود دارد که می‌توانید با دنبال کردن موارد زیر از آن‌ها استفاده کنید:

errorClass: تنظیم یک کلاس منحصر به فرد برای خطاها که می‌شود از طریق CSS به آن دسترسی پیدا کرد.

validClass: تنظیم یک کلاس منحصر به فرد برای موارد معتبر که می‌شود از طریق CSS به آن دسترسی پیدا کرد.

errorPlacement(): تعیین نقطه‌ای برای نمایش خطاها.

highlight(): متدی برای برجسته کردن وضعیت خطاها و یا موارد معتبر.

unhighlight(): متدی برای برجسته نکردن وضعیت خطاها و یا موارد معتبر.

متد‌های اضافی

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

منبع