اعتبار سنجی و بررسی فیلدهای خالی فرم با جیکوئری
یکی از مهمترین مواردی که بار ترافیکی روی سرور را به طور چشمگیری کاهش می دهد و همچنین امنیت پایگاه داده را نیز بالا می برد ، اعتبار سنجی فرم های HTML سمت کاربر و بررسی داده های ورودی توسط کاربر است.
اگر چه اعتبارسنجی داده ها سمت کاربر کافی نیست و شما بایستی سمت سرور نیز داده ها را بررسی کنید ولی همین نکته نیز کار سرور را راحت تر می کند.
یکی از موارد اعتبار سنجی فرم ها بررسی فیلدهای خالی و نمایش پیام خطا به کاربر می باشد. در این آموزش قصد داریم تا به وسیله جیکوئری یک فرم دارای چند فیلد متنی را بررسی کرده و در صورت خالی بودن فیلدها پیام خطا به کاربر نمایش داده شود.
قبلاز شروع شما باید با موارد زیر آشنایی داشته باشید
- HTML , CSS
- JavaScript
- Jquery
در صورتی که با موارد بالا آشنایی ندارید می توانید از طریق لینک های زیر شروع کنید :
آموزش طراحی وب HTML و CSS
خب در ابتدا یک سند Html می سازیم و یک فرم با 4 فیلد متنی ایجاد کرده و با CSS کمی شکل ظاهری آن را تغییر می دهیم.. مطابق کد زیر
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form-control">
<form>
<div class="form-box">
<label>Enter Name:</label>
<input type="text" class="required">
</div>
<div class="form-box">
<label>Enter Last Name:</label>
<input type="text" class="required">
</div>
<div class="form-box">
<label>Enter Email:</label>
<input type="text" class="required">
</div>
<div class="form-box">
<label>Enter password:</label>
<input type="text" class="required">
</div>
<div class="form-box">
<button id="check-form" type="button">register</button>
</div>
<div id="success" class="success"></div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/handler.js"></script>
</body>
</html>
کدهای CSS :
.form-control {
border: 2px solid blue;
border-radius: 10px;
padding: 1em;
width: 50%;
margin: 50px auto;
}
.form-box {
padding: .2em;
}
.form-box label {
width: 150px;
display: inline-block;
}
.form-box input[type=text] {
padding: .2em;
border: solid 1px gray;
}
.success {
padding: 10px;
color: green;
width: 20%;
text-align: center;
margin: 0 auto;
font-size: 20px;
}
.error {
color: red;
font-weight: bold;
}
همچنین علاوه بر کتابخانه jquery یک فایل جاوااسکریپت برای نوشتن اسکریپتها به سند با نام handle.js اضافه می کنیم :
<script src="js/jquery.js"></script>
<script src="js/handler.js"></script>
کدهای handler.js :
$(document).ready(function(){
$('#check-form').click(function(){
var dataValid = true;
$('#success').html('');
$('.required').each(function(){
var cur = $(this);
cur.next('span').remove();
if($.trim(cur.val())== '') {
cur.after('<span class="error">text is required</span>');
dataValid = false;
}
})
if(dataValid)
{
$('#success').html('it is ok');
}
})
})
روند کار:
دکمه ای با آیدی check-form موجود است که پس از کلیک شدن روی آن کلیه فیلدهایی که دارای کلاس required هستند بررسی شده و اگر مقدار آن ها خالی بود یک پیام خطا جلوی هر فیلد خالی نمایش داده می شود. در صورتی که همه فیلدهای متنی دارای مقدار باشند یک پیام موفقیت آمیز در انتهای فرم نمایش داده می شود.
ابتدا متغیری با نام dataValid با مقدار true تعریف می کنیم. در ادامه اگر فیلیدی خالی بود مقدار این متغیر false خواهد شد. به این صورت ما یه flag تعریف کردیم که مقدار true یا false بودن آن اعتبار سنجی فرم را به عهده دارد.
سپسا روی رویداد click دکمه ارسال فرم این گونه عمل می کنیم که کلیه فیلدهایی که با کلاس reauired تعیین شده اند را با استفاده از each می گیریم و بررسی می کنیم که آیا مقدار آن خالی است یا خیر.
اگر فیلدی خالی بود با استفاده از متد After متن خطایی در ادامه آن اضافه می کنیم. این متن خطا یک تگ span با کلاس error می باشد.
cur.after(\'<span class=\"error\">text is required</span>\');
و سپس مقدار dataValid را برابر false قرار می دهیم تا فرم موقتا ارسال نشود. و در انتها بررسی می کنیم که اگر مقدار dataValid برابر true بود پیام موفقیت آمیز نمایش داده شود.
نظرات کاربران