ورود / ثبت نام
0
0

چگونه با jQuery و Bootstrap Validator اعتبارسنجی فرم انجام دهیم

491 بازدید
اعتبارسنجی فرم

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

در این مقاله، یک راه ساده برای اعتبارسنجی فرم ها با استفاده از jQuery و Bootstrap validator را نشان خواهیم داد. یکی از کارهای رایج در برنامه نویسی سایت، ایجاد فرمی برای پذیرش اطلاعات، فیدبک و کامنت ها از بازدیدکنندگان است. اما پیش از تایید و ارسال این مطالب به سرور، لازم است که ورودی کاربر توسط ما اعتبارسنجی شود. می توانیم شماره تماس، ایمیل، آدرس، تاریخ و… را بسته به نیاز خود اعتبارسنجی نماییم.
برای این کار، از یک افزونه به نام  Bootstrap validator استفاده می کنیم. این پلاگین براساس Twitter Bootstrap.js می باشد و لیستی از امکانات فوق العاده را در اختیار ما قرار می دهد که برخی از آنها در زیر آمده است:

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

  • Bootstrap UI  و  web-fonts
  • تعریف validator براساس امکانات پلاگین یا HTML data-attribute
  • برخی اعتبارسنجی های مربوط به فیلدها مانند: طول محتوا، تاریخ، کارت اعتباری، IBAN و IMEI، شماره تماس و …
  • اعتبار سنجی Custom fields
  • امکان اضافه کردن چندین validator به فیلد
  • امکان نمایش نتیجه اعتبارسنجی در یک المنت HTML خاص
  • API های قدرتمند برای دستکاری نمونه های پلاگین و رفتار آنها
  • برخی زبان های پشتیبانی شده برای محلی سازی (localization)
  • پیاده سازی  Bootstrap Validator:

برای استفاده ازBootstrap Validator، باید ابتدا پیش نیازهای(Dependancy)  زیر را به پروژه خود اضافه کنیم:

jQuery

Bootstrap (js و css)

برای اینکه در عمل ببینید، می توانیم یک اعتبارسنجی فرم با چک کردن اطلاعات تماس معمولی مانند نام، آدرس ایمیل معتبر و یک محیط متنی تنظیم کنیم.
پیش نیازهای include شده را می توانید در زیر مشاهده کنید:

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Boostrap Validator</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> 
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
</head>

در اینجا، کدهای HTML  مربوط به فرم را داریم:

<form id="contactForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Full name</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="fullName" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">Email</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">Title</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="title" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">Content</label>
        <div class="col-md-6">
            <textarea class="form-control" name="content" rows="5"></textarea>
        </div>
    </div>
    <!-- #messages is where the messages are placed inside -->
    <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
            <div id="messages"></div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

خروجی فرم به شکل زیر خواهد بود:

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

حال اعتبارسنجی فرم را فعال می کنیم. همانطور که در کد زیر مشاهده می کنید، چند فیلد و همچنین اعتبارسنجی هایی بر روی آنها تعریف کردیم.

$(document).ready(function() {
    $('#contactForm').bootstrapValidator({
        container: '#messages',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fullName: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required and cannot be empty'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The email address is not valid'
                    }
                }
            },
            title: {
                validators: {
                    notEmpty: {
                        message: 'The title is required and cannot be empty'
                    },
                    stringLength: {
                        max: 100,
                        message: 'The title must be less than 100 characters long'
                    }
                }
            },
            content: {
                validators: {
                    notEmpty: {
                        message: 'The content is required and cannot be empty'
                    },
                    stringLength: {
                        max: 500,
                        message: 'The content must be less than 500 characters long'
                    }
                }
            }
        }
    });
});

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

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

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

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

و به این ترتیب، تا زمانی که فیلدهای موردنیاز و معتبر پر نشده باشند، فرم تایید نخواهد شد.

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

موفق باشید !

 

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18336
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

2 نظر در مورد چگونه با jQuery و Bootstrap Validator اعتبارسنجی فرم انجام دهیم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *