تو این آموزش میخوایم با ساختن یک فرم ورود ساده، چندتا از دستورات کاربردی jquery رو بررسی کنیم. همراهمون باشید.

برای شروع فایل زیر رو دانلود کنید و extract کنید. توی این مجموعه، فایل‌های مربوط به فرم ورود قرار داره ولی فایل index.js اون خالیه که در طی این مقاله باهم کاملش میکنیم.

login_jquery.zip

برای کامل کردن فرم ورود ۵ مرحله داریم که باید بگذرونیم:

• دسترسی به عناصر صفحه
• نوشتن onclick برای دکمه‌ی login
• گرفتن email و password
• بررسی مقدارهای ورودی
• ارسال اطلاعات به سرور

۱- دسترسی به عناصر صفحه

برای اینکار دستور خیلی ساده و کاربردی در jquery وجود داره. ابتدا علامت $ رو گذاشته و به دنبال اون پرانتزها رو میذاریم، توی پرانتز کوتیشن قرار میدیم و توی کوتیشن عنصر مورد نظر رو مینویسیم. مثال زیر رو نگاه کنید:

$('#first')
$('.second')
$('div')

خط اول، تگ با آیدی first رو برمیگردونه(آیدی با # مشخص میشه). خط دوم تگ‌هایی با کلاس second رو برمیگردنه(کلاس با . مشخص میشه) و خط سوم تگ‌های div رو برمیگردونه. از این دستورها به صورت ترکیبی هم میشه استفاده کرد به شکل زیر:

$('#first div')

این دستور تمام تگ‌های div که درون تگ با آیدی first قرار دارن رو برمیگردونه.

۲- نوشتن onclick برای دکمه‌ی login

برای نوشتن تابعی که هنگام کلیک شدن روی یک عنصر فراخونی بشه(یا همون onclick)، با استفاده از دستورات قسمت اول به اون عنصر دسترسی پیدا میکنیم و دستور click رو در ادامش مینویسیم و تابعی که میخوایم اجرا بشه رو به اون میفرستیم. کد زیر رو در فایل index.js بنویسید و صفحه‌ی مرورگرتون رو refresh کنید. اگر روی دکمه‌ی login کلیک کنید پیام yes رو دریافت میکنید.

$(document).ready(function() {
 $('#login-submit').click(function() {
 alert('yes');
 });
});

قسمت اضافه‌ای که در این بخش نوشتیم خط اول هست و کاری که انجام میده اینه که کدهای داخلش رو بعد از بارگذاری کامل صفحه اجرا میکنه(و نه قبل از اون).

۳- گرفتن email و password

قبل از اینکه اطلاعات کاربر رو پردازش کنیم نیاز داریم که اون‌ها رو بخونیم. با استفاده از تابع val میتونیم مقدار یک input رو بخونیم. کد زیر مقدار inputهای login-email و login-password رو بعد از زدن دکمه‌ی login میخونه و در متغیرهای email و password میریزه.

$(document).ready(function() {
 $('#login-submit').click(function() {
 var email = $('#login-email').val();
 var password = $('#login-password').val();
 });
});

4- بررسی مقدارهای ورودی

در اینجا ما فقط بررسی میکنیم که password کمتر از ۸ کاراکتر نباشه و در غیر اینصورت پیام خطایی را به کاربر نمایش میدیم. برای اینکار کد زیر رو به کد بالا بعد از دو متغیر email و password اضافه کنید:

  var send = false;
 if (password.length < 8) {
 $('#login-error').html('password most be at least 8 char');
 send = false;
 } else {
 $('#login-error').html('');
 send = true;
 }

با استفاده از تابع html میتونیم محتوای یک تگ و تغییر بدیم. مثلا در کد بالا اگر پسورد از ۸ کاراکتر کمتر نباشه محتوای login-error رو خالی میکنیم.
برای اینکه بعدا بتونیم تشخیص بدیم که تونستیم از این فیلتر عبور کنیم یا نه(پسورد کمتر از ۸ کاراکتر بود یا نه)، متغیری به اسم send تعریف میکنیم که اگر پسورد کمتر از ۸ کاراکتر بود false و در غیر اینصورت true باشه.

۵- ارسال اطلاعات به سرور

برای ارسال درخواست به سرور توسط ajax میتونیم از تابع‌های محتلفی مثل post و get در jquery استفاده کنیم. برای مثال در اینجا از تابع post برای ارسال استفاده کردیم.

  if(send) {
 $.post("http://www.website.com/login",
 {
 email: email,
 password: password
 },
 function(data,status){
 alert("Data: " + data + "\nStatus: " + status);
 });
 }

• آرگومان اول: url
• آرگومان دوم: اطلاعات ارسالی (در قالب json)
• آرگومان سوم: تابعی که بعد از دریافت پاسخ فراخوانی میشه.

قبل از ارسال هم چک میکنیم که متغیر send برابر true باشه.

در نهایت کد شما باید چیزی شبیه کد زیر شده باشه:

$(document).ready(function() {
 $('#login-submit').click(function() {
 var email = $('#login-email').val();
 var password = $('#login-password').val();

 var send = false;
 if (password.length < 8) {
 $('#login-error').html('password most be at least 8 char');
 send = false;
 } else {
 $('#login-error').html('');
 send = true;
 }

 if(send) {
 $.post("http://www.website.com/login",
 {
 email: email,
 password: password
 },
 function(data,status){
 alert("Data: " + data + "\nStatus: " + status);
 });
 }
 });
});