فرم های وب از زمانی که به مقوله طراحی وب و فعل و انفعالات کاربری وارد شدند همواره یک بحث گرم بوده اند. دلایل این امر گسترده اند ، اما یکی از واضح ترین دلایل این است که فرم ها پایه ای ترین روش برای ورود اطلاعات توسط یک کاربر درون برنامه های شما هستند. در این مقاله ، ما با HTML5 فرم های خود را اعتبار سنجی می کنیم.

مثال ساده : اعتبار سنجی فرم ورود به سایت

فرآیند ورود به سایت چیزی شبیه این است: من آدرس ایمیلم را وارد می کنم ، سپس گذرواژه ام را وارد می کنم ، و بعد دکمه ی ورود(Enter) را فشار می دهم. در این مثال ، شما یاد خواهید گرفت که چگونه هریک از این فیلد ها را فقط بعد از اینکه فیلد قبلی کامل شد نشان دهید ، تنها با استفاده کردن از HTML و CSS.

بیایید با اولین قطعه کد HTML را بنویسیم.

<form method="post">
	<input type="email" name="email" required>
	<input type="password" placeholder="Password..." required>
	<input type="submit">
</form>

خوب بزارید توضیح بدم: بیایید با ورودی ایمیل شروع کنیم. ما می بینیم که آنسوی نام تگ صفتی اضافه شده. اول از همه ، نوع ورودی ایمیل”email” تعیین شده؛ این نسبتا نوع جدیدی از ورودی هست که چند رفتار ویژه را در مرورگرهای پشتیبانی کننده از آن به ما می دهد. برای نمونه ، در آیفون ، نشان “@” روی صفحه کلید اصلی نشان داده خواهد شد.

ویژگی دیگر نوع ورودی email این است که فرم های HTML5 توانایی اعتبار سنجی توسط مرورگر را دارند. این بدین معنی است که شما برای اجرای ارزیابی عناصر پایه ای فرم نیازی به نوشتن کد های جاوا اسکریپت ندارید ! توجه کنید که ما یک صفت “required” روی هردوی عناصر ایمیل و گذرواژه داریم. آن دو عنصر توسط مرورگر یکبار بررسی می شوند که پرشده باشند و مقادیر آنها معتبر باشد ، شما حتی می توانید با انتخاب گر ساختگی :valid  در CSS آنها را انتخابکنید.

اعتبار سنجی با عبارات با قاعده

در مثال بالا اگر در مرورگر عبارت “a@b” را به عنوان یک آدرس ایمیل تایپ کنید قابل قبول است. دلیل این امر این است که آدرس ایمیل باید طوری وضع شود که آماده رفتن به جایی مانند “something@localhost” باشد. یا گذرواژه ما می تواند هر چیزی که وارد می کنیم باشد ، پس یک گذرواژه تک حرفی مانند “a” می تواند معتبر باشد. بیایید از عبارات با قاعده برای حل و فصل این مشکلات استفاده کنیم.

توجه: اگر شما با عبارات با قاعده (regex) آشنا نیستید ، اشکالی ندارد ! ما در اینجا یک مقدار کم از آنها را برای اینکه به شما نشان دهیم نحوه استفاده کردن از آنها برای اعتبار سنجی در فرم HTML5 چگونه است را آموزش می دهیم.

<form method="post">
	<input type="email" name="email" required pattern="[^ @]*@[^ @]*\.[a-zA-Z]{2,}">
	<input type="password" placeholder="Password..." required pattern=".{5,}">
	<input type="submit">
</form>

ما با الگوی ایمیل شروع خواهیم کرد.

pattern="[^ @]*@[^ @]*\.[a-zA-Z]{2,}"

• [^ @]*– هر تعدادی از کارکترها مورد قبول است مگر یک نشان @ یا فضای خالی
• @ – یک نشان @
• \. – یک نقطه
• [a-zA-Z] – تمام حرف بزرگ یا کوچک انگلیسی
• [a-zA-Z]{2,} – هر ترکیب دوتایی یا بیشتر از حرف ها

ما اگر بخواهیم اعتبار سنجی را فقط برپایه طول مقدار انجام دهیم ، می توانیم یک عبارت با قاعده بسیار ساده تر بکار ببریم:

pattern=".{5,}"

معنی نقطه .در عبارت بالا “تمام کارکترها” است ، و {5,} به معنی، حداقل باید 5 کارکتر وجود داشته باشد.

<div class="login">
	<h3>Log In</h3>
	<form action="." method="post">
		<input type="email" placeholder="Your Email" pattern="[^ @]*@[^ @]*\.[^ @]{2,}" required />
		<input type="password" placeholder="Password..." required pattern=".{5,}" />
		<input type="submit" />
	</form>
</div>

استفاده از CSS برای برای نحوه رفتار ورودی ها (input)

حالا که ما برای فرم ورود خودمان چند نشانه گذار(markup) داریم ، بیایید ببینیم با CSS برای پاسخ دادن به ورودی کاربر چه می توانیم بکنیم.

ما می خواهیم عنصر بعدی فرم وقتی نمایش داده شود که عنصر فعلی معتبر باشد. بیایید با پنهان کردن خود عناصر فرم شروع کنیم.

.hidden {
  display: none;
}

ما با کمی استایل های (styles) پایه ای شروع خواهیم کرد.

body {
  background-color: #245245;
  font-family: ’Varela Round’, sans-serif;
}
h3 {
  color: #555;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.login {
  width: 300px;
  margin: 50px auto;
  background: #f5f9fa;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}
 
input[type=password],
input[type=email]{
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}
 
input[type=password]:focus,
input[type=email]:focus {
  border: 1px solid #888;
  outline: none;
}
input[type=submit] {
  background-color: #F29E1E;
  width: 50%;
  border: none;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Varela Round";
  font-size: 1em;
  text-transform: uppercase;
}
input[type=submit]:hover {
  background-color: #DB8F2A;
  cursor: pointer;
}
input {
  margin: 6px 0;
}

با کلاس hidden جاهایی که می خواهیم فیلد مخفی باشد از این کلاس استفاده می کنیم.

خوب بیایید مقداری از animation ها برای زیبا سازی فرم خود استفاده کنیم.

input[type=email]:valid + input[type=password]{
opacity: 1;
    position: relative;
    height: 30px;
    width: 100%;
    clip: none;
    margin: 12px auto;
    border: 1px solid #ccc;
    padding: 8px;
}
input[type=password]:valid + input[type=submit]{
  opacity: 1;
    position: relative;
    height: 40px;
    width: 50%;
    clip: none;
    margin: 12px auto;
    padding: 8px;
}

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

یک راه حل برای این مشکل می تواند استفاده کردن از نوعی محو شدگی بدون ناپدید شدن کامل ورودی ها باشد که برای ساختن روایت باز خوردی نزدیکی از فرم کمک کند ، که یک هدف روشن و چشم داشتی نسبتا قابل پیشگویی داشته باشد. در اینجا یک نسخه ی اصلاح شده موجود هست که از مقیاس گذاری ، فیلتر محو webkit ، شفافیت و تبدیل pointer-events:none به “present” برای کاربر ، هنگامی که آنها مهیا هستند استفاده می کند .

body {
  background-color: #245245;
  font-family: ’Varela Round’, sans-serif;
}
h3 {
  color: #555;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.login {
  width: 300px;
  margin: 50px auto;
  background: #f5f9fa;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}
 
input[type=password],
input[type=email]{
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}
 
input[type=password]:focus,
input[type=email]:focus {
  border: 1px solid #888;
  outline: none;
}
 
input[type=submit] {
  background-color: #F29E1E;
  width: 50%;
  border: none;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Varela Round";
  font-size: 1em;
  text-transform: uppercase;
}
input[type=submit]:hover {
  background-color: #DB8F2A;
  cursor: pointer;
}
input {
  margin: 6px 0;
}
 
input[type=password],
input[type=submit]{
  -webkit-filter: blur(1px);
  transform: scale(0.9);
  opacity: .4;
  transition: all .4s;
  pointer-events: none;
}
 
input[type=password]:valid + input[type=submit],
input[type=email]:valid + input[type=password] {
  pointer-events: auto;
  -webkit-filter: none;
  transform: scale(1);
  opacity: 1;
}

اشاره سریع به یک مشکل: وقتی یک کاربر کلید تب (tab) را می فشارد ؛ وارد عنصر بعدی فرم خواهند شد. ما از کلیک کردن درون عنصر بعدی فرم با pointer-events:none جلوگیری می کنیم ، اما صفت “focusable” در CSS وجود ندارد. برای حل این مشکل باید از jquery استفاده کنیم.

var inputs = $("input");
$(document).on("keypress", "input", function(){
inputs.each(function(i,el){
        var $el = $(el);
        if ($el.is(":valid")){
            $el.next("input")[0].disabled=false;
        } else {
            $el.next("input")[0].disabled=true;
        }
    });
});

این کد جاوا اسکریپت ورودی های فرم مارا می بیند و ورودی فعال/غیرفعال را بنا بر وضعیت صفت “:valid” فیلد قبلی مشخص می کند.