سلام 🙂

در این مبحث اگر موافق باشید می خواهیم روی یک فرم با شمایل فیبر کربن ! کار کنیم که دارای ارتقاهای اساسی می باشد.یعنی بتواند بدون جاوااسکریپت و css (مخصوصا در خانواده محبوب IE) کار کند و نیز مجهز به نمایی زیبا و دلفریب که حاصل ضرب jQuery و CSS به علاوه Ajax است.

از خصوصیات مهم آن اعتبار سنجی ورودی های فرم به صورت tooltip (آژاکسی) و نیز بقای اسکریپت در زمان غیر فعال بودن جاوااسکریپت هست.

قدم ۱ – XHTML

اولین قدم شامل ایجاد یک ستون فقرات از جنس xhtml برای فرم مان است

demo.html

<div id="carbonForm">
	<h1>Signup</h1>

	<form action="submit.php" method="post" id="signupForm">

		<div class="fieldContainer">
			<div class="formRow"></div>
			<!-- Two more formRow divs -->
		</div>

		<div class="signupButton">
			<input type="submit" name="submit" id="submit" value="Signup" />
		</div>

	</form>
</div>

دیو carbonForm نگهدارنده اصلی فرم است.این عنصر توسط خصیصه margin در css ، درست رد وسط صفحه قرار می گیرد و نیز با استفاده از جی کوئری به صورت عمودی نیز در مرکز قرار می گیرد.

در داخل آن ما یک تگ heading ویک فرم با fieldContainer داخلش داریم.در داخل آن نیز ۳ دیو formRow خواهیم داشت با کدهایی شبیه زیر :

demo.html

<div class="formRow">
	<div class="label">
		<label for="name">نام:</label>
	</div>

	<div class="field">
		<input type="text" name="name" id="name" />
	</div>
</div>

همینطور که می بینید ،هر label و input در داخل دیو نگهدارنده خودش قرار دارد که در سمت راست ، شناور(float) شده اند.نکته مهم این است که در ورودی های متن، خصیصه name باید با id مساوی باشد زیرا برای نمایش tooltip خطای رخ داده از این روش استفاده خواهیم کرد که در ادامه می بینید

قدم ۲ – CSS

فرم ما برای اینکه حالت فیبر کربنی پیدا کند شدیدا نیازمند css است.در کد پایین از تعدادی عنصر css3 نیز استفاده شده است که موجب گردیده افکت های خوبی را ایجاد کنیم که قبل از این فقط در نرم افزارهای گرافیکی مثل فتوشاپ امکان ایجادشان بود.در اینجا فقط تعدادی از سبک های جالب css را می آوریم و فایل کامل styles.css را در سورس آموزش می توانید پیدا کنید

#carbonForm{
	/* The main form container */
	background-color:#1C1C1C;
	border:1px solid #080808;
	margin:20px auto;
	padding:20px;
	width:500px;

	-moz-box-shadow:0 0 1px #444 inset;
	-webkit-box-shadow:0 0 1px #444 inset;
	box-shadow:0 0 1px #444 inset;
}

.fieldContainer{
	/* The light rounded section, which contans the fields */
	background-color:#1E1E1E;
	border:1px solid #0E0E0E;
	padding:30px 10px;

	/* CSS3 box shadow, used as an inner glow */
	-moz-box-shadow:0 0 20px #292929 inset;
	-webkit-box-shadow:0 0 20px #292929 inset;
	box-shadow:0 0 20px #292929 inset;
}

#carbonForm,.fieldContainer,.errorTip{
	/* Rounding the divs at once */
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

.formRow{
	height:35px;
	padding:10px;
	position:relative;
}

.label{
	float:right;
	padding:0 20px 0 0;
	text-align:right;
	width:70px;
}

label{
	font-family:Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
	font-size:11px;
	letter-spacing:1px;
	line-height:35px; /* Neat line height trick */
}

.field{
	float:right;
}

.field input{
	/* The text boxes */
	border:1px solid white;
	color:#666666;
	font-family:Arial,Helvetica,sans-serif;
	font-size:22px;
	padding:4px 5px;
	background:url("img/box_bg.png") repeat-x scroll left top #FFFFFF;
	outline:none;
}

#submit{
	/* The submit button */
	border:1px solid #f4f4f4;
	cursor:pointer;
	height:40px;
	text-indent:-9999px;
	text-transform:uppercase;
	width:110px;

	background:url("img/submit.png") no-repeat center center #d0ecfd;

	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

#submit.active{
	/* Marking the submit button as active adds the preloader gif as background */
	background-image:url("img/preloader.gif");
}

input:hover,
input:focus{
	/* CSS3 glow effect */
	-moz-box-shadow:0 0 8px lightblue;
	-webkit-box-shadow:0 0 8px lightblue;
	box-shadow:0 0 8px lightblue;
}

قدم ۳ -jQuery

بعد از الحاق کتابخانه jQuery و فایل script.js می توانیم برویم سراغ کد نویسی جاوااسکریپت و جان تازه ای در کالبد فرم بدمیم 🙂

script.js

$(document).ready(function(){
	// $(document).ready() is executed after the page DOM id loaded

	// Binding an listener to the submit event on the form:
	$('#signupForm').submit(function(e){

		// If a previous submit is in progress:
		if($('#submit').hasClass('active')) return false;

		// Adding the active class to the button. Will show the preloader gif:
		$('#submit').addClass('active');

		// Removing the current error tooltips
		$('.errorTip').remove();

		// Issuing a POST ajax request to submit.php (the action attribute of the form):
		$.post($('#signupForm').attr('action'),
			$('#signupForm').serialize()+'&fromAjax=1',function(response){

			if(!response.status)
			{
				// Some kind of input error occured

				// Looping through all the input text boxes,
				// and checking whether they produced an error
				$('input[type!=submit]').each(function(){
					var elem = $(this);
					var id = elem.attr('id');

					if(response[id])
						showTooltip(elem,response[id]);
				});
			}
			else location.replace(response.redirectURL);

			$('#submit').removeClass('active');
		},'json');

		e.preventDefault();
	});

	$(window).resize();
});

// Centering the form vertically on every window resize:
$(window).resize(function(){
	var cf = $('#carbonForm');

	$('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)
});

// Helper function that creates an error tooltip:
function showTooltip(elem,txt)
{
	// elem is the text box, txt is the error text
	$('<div class="errorTip">').html(txt).appendTo(elem.closest('.formRow'));
}

با این کد کلیک کردن دکمه ثبت نام یا فشار دادن دکمه enter موجب ارسال فرم می شود.همچنین برای اینکه فمر به صورت معمولی ارسال نشود یک تابع به نام ()e.preventDefault داریم که از اینکار جلوگیری می کند و یه جایش یک درخواست Ajax به submit.php می فرستد.

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

یک نمونه از پاسخ برگشتی خطا

{
	"status"	: ۰,	// Indicates that the response is an error
	"email"		: "Please fill in a valid email!",		// Error message
	"pass"		: "Please fill in a valid password!"	// Error message
}

خطاهای فرم که به صورت tooltip هستند ،به وسیله اسکریپت ایجاد می شوند به این صورت که یک حلقه بین تمام فیلد های فرم ایجاد می کند و هربار چک می کند که آیا id فیلد ها به عنوان خصیصه در جواب برگشتی موجود است یا نه .اگر این طور باید یک tooltip بوسیله تابع ()showTooltip ایجاد میشود.

همچنین دقت کنید که چطور در خط ۱۸ از تابع ()serialize برای ارسال یکجای فیلدها استفاده کرده ایم.نیز در همان خط ۱=fromAjax را ست کردیم تا php پاسخ را به صورت JSON برگشت دهد.

حالا اجازه دهید ببینیم چگونه پاسخ ایجاد می شود و ورودی ها اعتبارسنجی می شوند.

قدم ۴ – PHP

یکی از قابلیت های خوب این فرم این است که بدون جاوا اسکریپت نیز کار می کند.این کار کردن ، به خاطر خصیصه action فرم است که روی submit.php تنظیم شده است.این به این معنی است که ما تنها نیاز به پیاده کردن اعتبار سنجی داریم و مهم نیست فمر چطور ارسال میشود

<?php
// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// This is the URL your users are redirected,
// when registered succesfully:

$redirectURL = 'http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html';

$errors = array();

// Checking the input data and adding potential errors to the $errors array:

if(!$_POST['name'] || strlen($_POST['name'])<3 || strlen($_POST['name'])>50)
{
	$errors['name']='لطفا فیلد ایمیل را پر کنید<br />باید بین ۳ تا ۵۰ کاراکتر باشد !';
}

if(!$_POST['email'] || !preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email']))
{
	$errors['email']='لطفا فیلد ایمیل را پر کنید !';
}

if(!$_POST['pass'] || strlen($_POST['pass'])<5)
{
	$errors['pass']='لطفا فیلد کلمه عبور را پر کنید !<br />باید بیشتر از ۵ کاراکتر باشد.';
}

// Checking whether the request was sent via AJAX
// (we manually send the fromAjax var with the AJAX request):

if($_POST['fromAjax'])
{
	if(count($errors))
	{
		$errString = array();
		foreach($errors as $k=>$v)
		{
			// The name of the field that caused the error, and the
			// error text are grouped as key/value pair for the JSON response:
			$errString[]='"'.$k.'":"'.$v.'"';
		}

		// JSON error response:
		die	('{"status":0,'.join(',',$errString).'}');
	}

	// JSON success response. Returns the redirect URL:
	echo '{"status":1,"redirectURL":"'.$redirectURL.'"}';

	exit;
}

// If the request was not sent via AJAX (probably JavaScript
// has been disabled in the visitors' browser):

if(count($errors))
{
	echo '<h2>'.join('<br /><br />',$errors).'</h2>';
	exit;
}

// Directly redirecting the visitor:

header("Location: ".$redirectURL);
?>

حالا تمام خطاهای رخ داده به آرایه errors$ اضافه خواهند شد.همچنین تعیین اینکه خطاها به صورت json بازگشت داده شوند و یا مستقیما نمایش داده شوند بوسیله fromAjax تعیین می شود که قبلا گفتیم.

خوب دیگه فرم کربنی ما تمام شد !

منبع