اعتبارسنجی فرم با استفاده از jQuery و Bootstrap validator
یکشنبه 8 شهریور 1394در این مقاله، یک راه ساده برای اعتبارسنجی فرم ها با استفاده از 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'
}
}
}
}
});
});
حال اگر فرم را بدون پر کردن فیلدها ثبت کنیم، این توضیحات اعتبارسنجی را مشاهده خواهیم کرد.
با پر کردن فیلدها می بینیم که یک به یک این جزییات از بین رفته و فیلدها به رنگ سبز در می آید و یک بازخورد سریع به کاربر می دهد.
و به این ترتیب، تا زمانی که فیلدهای موردنیاز و معتبر پر نشده باشند، فرم تایید نخواهد شد.
به یاد داشته باشید که داه ها را پیش از ارسال به سرور، اعتبارسنجی نمایید و همچنین علاوه بر اعتبارسنجی سمت کلاینت، در سمت سرور نیز اعتبارسنجی انجام دهید چرا که ممکن است کاربر جاوااسکریپت را در مرورگر خود غیرفعال کرده باشد.
- Jquery
- 5k بازدید
- 7 تشکر