اعتبارسنجی همزمان فرم با ای جکس (Ajax) و PHP

کد ای جکس (Ajax) برای ارسال اطلاعات فرم

برای ارسال اطلاعات فرم قبل از هر چیز باید موتور پایه مبتنی بر ای جکس (Ajax) را برنامه نویسی کنیم، همان طور که در آموزش های مقدماتی دیدیم درخواست های ای جکس مبتنی بر آبجکت XMLHttpRequest (برای تمام مرورگرها به جزء نسخه های قدیمی اینترنت اکسپلورر) یا ActiveXObject (برای اینترنت اکسپلورر نسخه 7 و ماقبل) هستند، بر همین مبنا در نمونه کد زیر ابتدا با دستورات جاوا اسکریپت اطلاعات فیلدهای فرم دریافت و به سرور ارسال می شوند، پس از ارسال درخواست و تا زمان بازگشت پاسخ از سرور پیام یا تصویری مبنی بر درحال پردازش بودن درخواست نمایش داده و در نهایت پاسخ سرور را تجزیه تحلیل یا در بلاک div خروجی می دهیم:

<script>
function ajaxRequest(input_name, input_value, div_id){
    var form_value = input_name + "=" + input_value;
    var loading_message = '<img src="loading.gif" alt="loading" height="16" width="16"> لطفا کمی صبر کنید...';    
    var xmlhttp;

    if(window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        //IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState < 4){
            document.getElementById(div_id).innerHTML = loading_message;
        } else if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
            document.getElementById(div_id).innerHTML = xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("POST","ajax-validate.php", true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(form_value);
}
</script>

توضیح:
- تابع اصلی کد ajaxRequest (نام دلخواه) است و از سه آرگیومنت استفاده می کند که به ترتیب شامل نام فیلد مورد نظر، مقادیر و آی دی فیلد می شوند، این آرگیومنت ها در قسمت های مختلف تابع استفاده شده اند.
- در متغیر form_value پارامتر و مقادیر را برای ارسال از طریق متد xmlhttp.send آماده می کنیم، به طور مثال اگر input_name برابر usertext باشد و input_value برابر 1، مقادیر متغیر form_value به صورت usertext=1 خواهد بود، به این صورت در سمت سرور می توانیم اطلاعات را با متد POST دریافت کنیم، به طور مثال:

<?php
$usertext = $_POST['usertext'];
?>

- متغیر loading_message برای نمایش تصویر و پیام "در حال پردازش ..." یا "لطفا کمی صبر کنید..." در حالتی که xmlhttp.readyState < 4 است استفاده می شود.
- با توجه به تنظیمات قسمت xmlhttp.open اطلاعات فیلدهای فرم با متد POST به فایل ajax-validate.php ارسال می شوند.
- در نهایت نیز پاسخ سرور با متد responseText دریافت و با innerHTML در بلاک div هدف (که آی دی آن را با آرگیومنت div_id دریافت کرده ایم) خروجی داده می شود.

نحوه استفاده و فراخوانی تابع ای جکس

برای اینکه موتور ای جکس ما به کار بیفتد لازم است که با استفاده از رویدادهای جاوا اسکریپتی نظیر onkeyup یا onchange تابع را فراخوانی کنیم، در نمونه کدهای زیر از رویداد onchange بدین منظور استفاده کرده ایم:

<form action="ajax-validate.php" method="post">
<label for="usertext">اعتبار سنجی عدد بودن مقادیر:</label><br>
<input type="text" name="usertext" id="usertext" dir="ltr" onchange="ajaxRequest('usertext', this.value, 'showresult-1');">
<div class="inline" id="showresult-1"></div>
<br><br>
<label for="usermail">اعتبار سنجی معتبر بودن ایمیل:</label><br>
<input type="text" name="usermail" id="usermail" dir="ltr" onchange="ajaxRequest('usermail', this.value, 'showresult-2');">
<div class="inline" id="showresult-2"></div>
<br><br>
<label for="usersite">اعتبار سنجی معتبر بودن آدرس سایت:</label><br>
<input type="text" name="usersite" id="usersite" dir="ltr" onchange="ajaxRequest('usersite', this.value, 'showresult-3');">
<div class="inline" id="showresult-3"></div>
</form>

توضیح:
- همان طور که گفتیم برای هر فیلد تابع ajaxRequest را با سه آرگیومنت متفاوت فراخوانی می کنیم که آرگیومنت اول نام فیلد، آرگیومنت دوم مقادیر فیلد و آرگیومنت سوم آی دی بلاک div است که قصد داریم نتیجه را در آن نمایش دهیم، به این صورت مواد اولیه به تابع داده شده و تابع پس از آماده سازی پارامترها و مقادیر درخواست را به سرور ارسال می کند، در نهایت پاسخ سرور در بلاک div (که آی دی آن را با آرگیومنت div_id تنظیم کرده ایم) خروجی داده می شود.
- در این مثال از رویداد onchange استفاده کرده ایم که بنا به نیاز می توانیم از سایر رویدادها مانند onkeyup، onblur، onfocus و... نیز استفاده کنیم.

کد PHP برای پردازش اطلاعات ارسالی

با توجه به هدفمان از اعتبارسنجی شکل برنامه نویسی سمت سرور نیز متفاوت خواهد بود، برای نمونه در مثال زیر سه فیلد را از لحاظ اینکه مقادیر ارسال شده عدد، آدرس ایمیل معتبر و یا آدرس وبسایت یا وبلاگ باشد بررسی و نتیجه را چاپ کرده ایم:

<?php
@$usertext = $_POST['usertext'];
@$usermail = $_POST['usermail'];
@$usersite = $_POST['usersite'];

if(isset($usertext) && is_numeric($usertext)){
    echo '<div class="result-true">عبارت وارد شده یک عدد است!</div>';
} elseif(isset($usertext) && !is_numeric($usertext)){
    echo '<div class="result-false">عبارت وارد شده یک عدد نیست!</div>';    
}

if(isset($usermail) && preg_match("/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i", $usermail) > 0){
    echo '<div class="result-true">ایمیل وارد شده معتبر است!</div>';
} elseif(isset($usermail) && preg_match("/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i", $usermail) == 0){
    echo '<div class="result-false">ایمیل وارد شده معتبر نیست!</div>';    
}

if(isset($usersite) && preg_match("/^\S+\.\S+.+$/i", $usersite) > 0){
    echo '<div class="result-true">آدرس سایت وارد شده معتبر است!</div>';
} elseif(isset($usersite) && preg_match("/^\S+\.\S+.+$/i", $usersite) == 0){
    echo '<div class="result-false">آدرس سایت وارد شده معتبر نیست!</div>'; 
}
?>

توضیح:
- متغیر usertext به لحاظ اینکه یک مقدار عددی باشد یا خیر بررسی می شود، در این بررسی از تابع is_numeric در PHP استفاده کرده ایم.
- متغیر usermail به لحاظ اینکه آدرس ایمیل معتبر باشد بررسی می شود، در اینجا از تابع preg_match و یک الگو بر اساس عبارات باقاعده (Regular Expression) استفاده کرده ایم.
- متغیر usersite نیز به لحاظ پیروی کردن از الگوی صحیح آدرس وبسایت بررسی می شود، در اینجا نیز از تابع preg_match و الگو بر اساس عبارات باقاعده (Regular Expression) استفاده کرده ایم.
نکته 1: تابع preg_match با توجه به الگوی در نظر گرفته شده رشته ارسالی را بررسی می کند، اگر مقادیر ارسال شده مطابق با الگو باشد، مقدار 1 (یا true) و در غیر این صورت مقدار 0 (یا false) را برمی گرداند.
نکته 2: علامت @ در ابتدای متغیرها برای جلوگیری از نمایش خطاها و نادیده گرفته شدن آنها در PHP است.

کد و پیش نمایش آنلاین

در ادامه کد نهایی و پیش نمایش آنلاین اعتبارسنجی همزمان فیلدهای فرم با ای جکس (Ajax) و PHP را جهت تست و بررسی بیشتر درج کرده ایم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اعتبارسنجی فرم های وب با ای جکس</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.inline {
    display: inline-block;
}
.result-true {
    color: #090;
}
.result-false {
    color: #C00;
}
</style>
<script>
function ajaxRequest(input_name, input_value, div_id){
    var form_value = input_name + "=" + input_value;
    var loading_message = '<img src="loading.gif" alt="loading" height="16" width="16"> لطفا کمی صبر کنید...';    
    var xmlhttp;

    if(window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        //IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState < 4){
            document.getElementById(div_id).innerHTML = loading_message;
        } else if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
            document.getElementById(div_id).innerHTML = xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("POST","ajax-validate.php", true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(form_value);
}
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیرفعال است یا پشتیبانی نمی شود!<br>
</noscript>
<form action="ajax-validate.php" method="post">
<label for="usertext">اعتبار سنجی عدد بودن مقادیر:</label><br>
<input type="text" name="usertext" id="usertext" dir="ltr" onchange="ajaxRequest('usertext', this.value, 'showresult-1');">
<div class="inline" id="showresult-1"></div>
<br><br>
<label for="usermail">اعتبار سنجی معتبر بودن ایمیل:</label><br>
<input type="text" name="usermail" id="usermail" dir="ltr" onchange="ajaxRequest('usermail', this.value, 'showresult-2');">
<div class="inline" id="showresult-2"></div>
<br><br>
<label for="usersite">اعتبار سنجی معتبر بودن آدرس سایت:</label><br>
<input type="text" name="usersite" id="usersite" dir="ltr" onchange="ajaxRequest('usersite', this.value, 'showresult-3');">
<div class="inline" id="showresult-3"></div>
</form>
<br>
<hr>
پس از تایپ یک عبارت در هر فیلد، در فیلد بعدی یا فضای خالی صفحه کلیک کنید تا رویداد onchange اجرا شود.
</body>
</html>

پیش نمایش آنلاین