التأكد من الحقول وارسال البيانات بـAjax عبر jQuery

في هذا الدرس سأقوم بوضع تلخيص سريع حول التعامل مع مكتبة jQuery قبل البدأ به، إن كنت على معرفة حول كيفية استخدامها فيمكنك تخطي هذا الشطر.

ما قبل البدأ: مكتبة jQuery:

مكتبة jQuery عبارة عن مكتبة مبنية على JavaScript لتسهل على المستخدم الوصول لعديد من دوال اللغة الرئيسية بشكل سلس.

مكتبة jQuery تتكون من ملف واحد فقط ويمكنك تنزيله من موقعها الرسمي. بالنسبة للاستخدام فكل ما عليك هو ربطها بالصفحة والطريقة هي بوضع التالي بين وسمي head في الصفحة:

<script type="text/javascript" src="jquery.js"></script>

أي أن “jquery.js” عبارة عن اسم الملف ومساره. للتعامل مع الأحداث في jQuery نستخدم هذه الطريقة:

$(handler).click();

أي أن “handler” يقصد بها المقبض أو الجزء المسبب للحدث في الصفحة. و click هي نوع الحدث (عند الضغط) ويمكن أن تكون هناك دالة داخل الحدث. بالعودة للمقبض، هناك أكثر من طريقة لتحديد المقبض؛ منهم استخدام id الجزء المراد استخدامه مسبوقًا بـ# ، مثالًا:

<button id="test" name="test">click me</button>
<script type="text/javascript">
$('#test').click(function(){
    alert("مرحبًا");
});
</script>

طريقة أخرى وهي باستخدام الاسم، لكن في هذه الحالة يجب تحديد نوع العنصر، مثالًا إن كان حقل فتسبقه input وإن كان صندوق نص فـ textarea تسبق اسم العنصر، وهنا مثال مبني على المثال الذي سبق أعلاه:

<button id="test" name="test">click me</button>
<script type="text/javascript">
$('button[name=test]').click(function(){
    alert("مرحبًا");
});
</script>

هناك طرق أخرى لكن ما سبق يفي بالغرض لعنوان الدرس. بالنسبة للأحداث فهي عديدة منها: submit, blur, focus and change

الجزء الأول من الدرس: إنشاء النموذج:

وهنا نموذج بسيط للشرح:

<div id="registration_division" style="width: 80%; margin: 0 auto;">
  <form method="post" action="?" name="registration_form">
    <label>الاسم: <input type="text" name="name"></label><br />
    <label>كلمة المرور: <input type="password" name="password"></label><br />
    <label>تأكيد كلمة المرور: <input type="password" name="password2"></label><br />
    <label>البريد الالكتروني: <input type="text" name="email"></label><br />
    <label>رقم الهاتف: <input type="text" name="phone"></label><br />
    <input type="submit" value="تسجيل">
  </form>
</div>

الجزء الثاني: التعامل مع النموذج:

في المثال أعلاه، اسم النموذج هو registration_form، لذا سيكون هو المقبض للتعامل مع النموذج وحدث اعتماد النموذج. بالتالي لحصر الحدث عند اعتماد النموذج نستخدم الآتي:

$('form[name=registration_form]').submit(function(){

});

بنفس طريقة استخدام المقبض للأحداث، نستخدمها للتعامل مع الحقول في النموذج، في الشفرة التالية تم اختصار طريقة جلب محتوى كل حقل في متغير:

$('form[name=registration_form]').submit(function(){
// اختصار قِيم الحقول في متغيرات
var input_name = $('input[name=name]').val();
var input_password = $('input[name=password]').val();
var input_password2 = $('input[name=password2]').val();
var input_email = $('input[name=email]').val();
var input_phone = $('input[name=phone]').val();
// متغيرات التحقق من البريد الالكتروني والهاتف
var RegExp_email = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
var RegExp_phone = new RegExp(/^\d+$/);
// متغيرات حساب ورسائل الأخطاء
var error_counter = 0;
var error_message = '';
});

(لاحظ كلمة val، هي اختصار لـ value والتي تعني قيمة)

شرح المتغيرات الإضافية:

RegExp_email و RegExp_phone هما متغيران الغرض منهما فحص صحة طريقة كتابة البريد الالكتروني ورقم الهاتف، هذا الفحص يتم عبر التعابيير القياسية، فمثلًا في حقل البريد الالكتروني يتم التأكد من أن البريد يبدأ بأحرف أو ارقام تتبعه علامة @ وبعده اسم نطاق وبعد الاسم نقطة “.” وأخيرًا امتداد النطاق. أما بالنسبة للهاتف فالتأكد هو فقط أن القيمة المررة في الدالة عبارة عن رقم. طريقة الاستخدام هي كالتالي:

RegExp_email.test('test@test.com');

المتغير error_counter هو متغير لحساب عدد الأخطاء. يبدأ من الصفر، ويتزايد إن كان هناك أي خطأ، وفي نهاية التحقق ستكون هناك مقارنة إن كانت قيمة المتغير error_counter تساوي صفرًا أم لا، فإن كانت صفرًا فهذا يعني أنه لا توجد أخطاء، وإن كانت أكبر من الصفر فهذا يعني أن هناك أخطاء.

المتغير error_message يستخدم لتخزين رسائل الخطأ، أي هو متغير يجمع رسائل الخطة لطباعتها لاحقًا.

طرق التحقق:

// التحقق من الكتابة في حقل الاسم
if(input_name.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة الاسم! \n';
}

// التحقق من الكتابة في حقل كلمة المرور
if(input_password.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة كلمة المرور! \n';
}

// التحقق من عدم تطابق حقلي كلمة المرور
if(input_password != input_password2){
// في حالة أن طول قيمة محتوى حقل كلمة المرور الأولى غير مطابقة للحقل الثاني، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'حقول كلمات المرور غير متطابقة! \n';
}

// التحقق من الكتابة في حقل كلمة البريد الالكتروني
if(input_email.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة البريد الالكتروني! \n';
}

// التحقق من عدم صحة طريقة كتابة البريد الالكتروني بعد التأكد من أن الحقل غير فارغ
if(input_email.length > 0 && !RegExp_email.test(input_email)){
// في حالة أن هناك خطأ في طريقة كتابة البريد الالكتروني، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'هناك خطأ في البريد الالكتروني! \n';
}

// التحقق من الكتابة في حقل الهاتف
if(input_phone.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة الهاتف! \n';
}

// التحقق من عدم صحة طريقة كتابة الهاتف بعد التأكد من أن الحقل غير فارغ
if(input_phone.length > 0 && !RegExp_phone.test(input_phone)){
// في حالة أن هناك خطأ في طريقة كتابة الهاتف، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'هناك خطأ في رقم الهاتف! \n';
}

// إن كانت قيمة متغير حساب الأخطاء أكبر من صفر، فهذا يعني أن هناك اخطاء
if(error_counter > 0){
// عرض رسالة الأخطاء على الشاشة
window.alert(error_message);
}else{
// في حالة عدم وجود أخطاء
}

في حالة عدم وجود أخطاء، سنقوم بتنفيذ Ajax والشفرة مع الشرح:

$.ajax({
url: "response.json", // وصلة الصفحة التي سيتم ارسال البيانات لها
type: "POST", // طريقة ارسال البيانات
dataType: "json", // نوع أو صيغة البيانات المستلمة
data: { // اسماء الحقول والقيم. في اليسار اسم الحقل الذي تستلمه صفحة تلقي البيانات، وفي اليمين قيمة الحقل حسب المتغيرات أعلاه
name: input_name,
password: input_password,
password2: input_password2,
email: input_email,
phone: input_phone
},
success: function(data){ // في حالة التمكن من ارسال البيانات دون مشاكل، التعامل مع الخطوة التالية
if(data.code == '1'){
window.alert ('تم التسجيل');
}else{
window.alert('هناك خطأ');
}
}
});

ملاحظة: response.json عبارة عن وصلة ارسال البيانات وتلقي الرد حولها، لكن بما أن الشرح يركز على JavaScript و jQuery تم وضع محتوى ثابت في الملف للتجربة فقط. JSON هي صيغة استلام الرد من جهة خادم الموقع وهي عبارة عن تنسيق معين فيما يلي سأضع مثال له.

محتوى ملف response.json:

{"code":"1","by":"Abdulaziz Al Rashdi","url":"http:\/\/www.alrashdi.co"}

لاحظ وجود 3 متغيرات في ما سبق هم: code, by و url. بالعودة لشفرة Ajax تم استخدام data.code للتأكد من حالة النموذج، في حالة الحاجة لجلب الرابط مثالًا يمكن استخدام data.url وهكذا..

الشفرة كاملة:

<!DOCTYPE HTML>
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form Validation - التحقق من نموذج</title>
<!-- استدعاء ملف مكتبة jQuery -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>

<body>
<div id="registration_division" style="width: 80%; margin: 0 auto;">
<form method="post" action="?" name="registration_form">
<label>الاسم: <input type="text" name="name"></label><br />
<label>كلمة المرور: <input type="password" name="password"></label><br />
<label>تأكيد كلمة المرور: <input type="password" name="password2"></label><br />
<label>البريد الالكتروني: <input type="text" name="email"></label><br />
<label>رقم الهاتف: <input type="text" name="phone"></label><br />
<input type="submit" value="تسجيل">
</form>
</div>

<script type="text/javascript">
$('form[name=registration_form]').submit(function(){
// اختصار قِيم الحقول في متغيرات
var input_name = $('input[name=name]').val();
var input_password = $('input[name=password]').val();
var input_password2 = $('input[name=password2]').val();
var input_email = $('input[name=email]').val();
var input_phone = $('input[name=phone]').val();
// متغيرات التحقق من البريد الالكتروني والهاتف
var RegExp_email = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
var RegExp_phone = new RegExp(/^\d+$/);
// متغيرات حساب ورسائل الأخطاء
var error_counter = 0;
var error_message = '';

// التحقق من الكتابة في حقل الاسم
if(input_name.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة الاسم! \n';
}

// التحقق من الكتابة في حقل كلمة المرور
if(input_password.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة كلمة المرور! \n';
}

// التحقق من عدم تطابق حقلي كلمة المرور
if(input_password != input_password2){
// في حالة أن طول قيمة محتوى حقل كلمة المرور الأولى غير مطابقة للحقل الثاني، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'حقول كلمات المرور غير متطابقة! \n';
}

// التحقق من الكتابة في حقل كلمة البريد الالكتروني
if(input_email.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة البريد الالكتروني! \n';
}

// التحقق من عدم صحة طريقة كتابة البريد الالكتروني بعد التأكد من أن الحقل غير فارغ
if(input_email.length > 0 && !RegExp_email.test(input_email)){
// في حالة أن هناك خطأ في طريقة كتابة البريد الالكتروني، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'هناك خطأ في البريد الالكتروني! \n';
}

// التحقق من الكتابة في حقل الهاتف
if(input_phone.length == 0){
// في حالة أن طول قيمة محتوى الحقل هي صفر، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'يرجى كتابة الهاتف! \n';
}

// التحقق من عدم صحة طريقة كتابة الهاتف بعد التأكد من أن الحقل غير فارغ
if(input_phone.length > 0 && !RegExp_phone.test(input_phone)){
// في حالة أن هناك خطأ في طريقة كتابة الهاتف، ستتزايد قيمة متغير حساب الأخطاء
error_counter++;
// وأيضًا إضافة رسالة الخطأ لمتغير رسائل الخطأ وسطر جديد
error_message += 'هناك خطأ في رقم الهاتف! \n';
}

// إن كانت قيمة متغير حساب الأخطاء أكبر من صفر، فهذا يعني أن هناك اخطاء
if(error_counter > 0){
// عرض رسالة الأخطاء على الشاشة
window.alert(error_message);
}else{
// في حالة أن متغير حساب الأخطاء يساوي الصفر سيتم إرسال قيم الحقول
$.ajax({
url: "response.json", // وصلة الصفحة التي سيتم ارسال البيانات لها
type: "POST", // طريقة ارسال البيانات
dataType: "json", // نوع أو صيغة البيانات المستلمة
data: { // اسماء الحقول والقيم. في اليسار اسم الحقل الذي تستلمه صفحة تلقي البيانات، وفي اليمين قيمة الحقل حسب المتغيرات أعلاه
name: input_name,
password: input_password,
password2: input_password2,
email: input_email,
phone: input_phone
},
success: function(data){ // في حالة التمكن من ارسال البيانات دون مشاكل، التعامل مع الخطوة التالية
if(data.code == '1'){
window.alert ('تم التسجيل');
$('form[name=registration_form]').trigger('reset'); // مسح محتويات الحقول
}else{
window.alert('هناك خطأ');
}
}
});
}

// لتجنب التحويل للصفحة التالية بالطريقة التقليدية
return false;
});
</script>

</body>
</html>

ملاحظة: لم تعمل الشفرة إن قمت بنسخها دون جمع بقية الملفات، يجب أن توفر ملف مكتبة jQuery بالإضافة إلى الملف response.json، يمكنك تنزيل ملف مضغوط يحتوي جميع الملفات من هنا.

رأيان حول “<!--:ar-->التأكد من الحقول وارسال البيانات بـAjax عبر jQuery<!--:-->”

أضف تعليق