نحوه اعتبارسنجی فرم ها با بوت استرپ 5

نحوه اعتبارسنجی فرم ها با بوت استرپ 5

اعتبار سنجی فرم یکی از مهمترین نیازمندی ها برای جلوگیری از استفاده نادرست در هنگام جمع آوری اطلاعات از طریق فرم های وب است. اعتبار سنجی فرم علاوه بر اینکه اولین دیوار محافظت از حملات سایبری احتمالی است ، از وب سایت شما در برابر ورودی های ضعیف نیز محافظت می کند. هرچند در سمت سرور نیز باید داده های ارسالی برای اعتبار سنجی بررسی شود ، استفاده از اعتبار سنجی سمت مشتری می تواند سریعتر از سرور به کاربر اطلاع دهد که داده نامعتبر است و  قبل از ارسال فرم ، به کاربر این شانس داده شود که فیلد های حاوی داده های نامعتبر را اصلاح کند. به طور کلی ، شما به اعتبار سنجی فرم به عنوان یک معیار امنیتی نیاز دارید زیرا داده های نامعتبر یکی از منابع اصلی آسیب پذیری های امنیتی وب سایت است. اعتبار سنجی می تواند چند لایه داشته باشد از جمله اعتبار سنجی سمت کاربر ، اعتبار سنجی سمت سرور ، سمت پایگاه داده و ... . هرچند هکر با کمی تلاش می تواند از اعتبار سنجی سمت کاربر عبور کند ولی بر اساس فلسفه « دفاع در عمق (Defense in Depth) » که به معنی اعتبار سنجی در تمام لایه های برنامه است وجود آن لازم است.

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

در این مقاله ، من به شما نشان می دهم که چگونه می توانید از اعتبار سنجی های فرم Bootstrap 5 برای نمایش برخی بازخورد های مناسب و عملی به داده های درون اجزای فرم مانند radio ، select، checkbox ، textbox و برخی دیگر از مولفه های موجود فرم ها در بوت استرپ در هنگام ارسال فرم ، استفاده کنید. پس از اعتبار سنجی فرم ها از JavaScript برای جلوگیری از ارسال فرم های نامعتبر استفاده خواهیم کرد.

توجه: HTML 5 ابزار اعتبار سنجی خاص خود را دارد ، اما به خصوص در مورد پشتیبانی از مرورگر ها محدودیت هایی دارد. یکی از محدودیت های قابل توجه عدم امکان سفارشی سازی هنگام کار با پیام های خطا است که برای آن باید راهی پیدا کنید. خوشبختانه ، Bootstrap 5 دارای استایل هایی مدرن برای اعتبار سنجی فرم است.

فهرست مطالب

• چگونه کار می کند
• عناصر HTML پشتیبانی شده
• استایل های ابزارکی اعتبارسنجی
• استفاده از جاوا اسکریپت
• طراحی یک فرم نمونه
• نتیجه

چگونه کار می کند

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

عناصر پشتیبانی شده ی HTML

استایل های اعتبار سنجی بوت استرپ ۵ را می توان در عناصر HTML زیر تنها با بکارگیری کلاس form-control در گروه های ورودی استفاده کرد.

• <input>
• <select>
• <textarea>

برای عنصر ورودی ، می توانید از استایل های اعتبارسنجی Bootstrap 5 در برچسب های متداول مانند جعبه متن (textbox) ، دکمه رادیویی (radio button) ، جعبه تأیید (checkbox) و برچسب عنصر فایل استفاده کنید.

اعتبار سنجی فرم بوت استرپ 5 اساساً دو حالت دارد: خطا و موفقیت. این حالت ها با کلاسهای معنایی زیر نمایش داده می شوند.

• کلاس is-invalid برای خطا
• کلاس is-valid برای موفقیت

در کد زیر این دو حالت اعتبار سنجی را مشاهده می کنیم:

<div class="col-md-4">
   <label for="validationSuccess" class="form-label text-success">Input with success</label>
   <input type="text" class="form-control is-valid" id="validationSuccess" required>
</div>
<div class="col-md-4">
   <label for="validationError" class="form-label text-danger">Input with error</label>
   <input type="text" class="form-control is-invalid" id="validationError" required>
</div>

و نتیجه این کد در مرورگر:

نشان گذاری html که در بالا مشاهده می کنید بسیار شبیه ورودی های معمولی است با این تفاوت که چند کلاس بوت استرپ برای اعمال حالت و ظاهر مناسب به آنها اعمال شده است.

در کد بالا فقط موارد مربوط به موضوع را بررسی می کنیم:

• اولین ورودی در وضعیت موفقیت است. همانطور که در کد می بینید ، فیلد ورودی در این حالت یک کلاس به نام is-valid دارد.
• ورودی دوم حالت خطا است. همانطور که در کد می بینید ، فیلد ورودی در این حالت یک کلاس به نام is-invalid دارد.
• اگر به تصویر توجه کنید می بینید که هر ورودی یک نماد در لبه سمت راست آن دارد. این آیکون ها به طور خودکار هنگامی که کلاس های بوت استرپ مورد نیاز را وارد می کنید اضافه می شوند.
• هر برچسب <label> دارای یک کلاس text-success یا text-danger است. اینها در اعتبارسنجی فرم لازم نیستند و فقط برای رنگ آمیزی برچسب متناسب با حالت برچسب است.

اما پیام های اعتبار سنجی فرم در Bootstrap 5 چگونه کار می کنند؟ اعتبار سنجی فرم ها در Bootstrap 5 دو حالت برای پیام های تأیید فرم مشابه اعتبار سنجی ورودی در بالا فراهم می کند: خطا و موفقیت.

این حالت ها با کلاس های معنایی زیر نمایش داده می شوند.

• کلاس invalid-feedback برای خطا
• کلاس valid-feedback برای موفقیت

در کد زیر این دو پیام اعتبار سنجی را مشاهده می کنیم:

<div class="col-md-4">
   <label for="validationSuccess" class="form-label text-success">Input with success</label>
   <input type="text" class="form-control is-valid" id="validationSuccess" required>
   <div class="valid-feedback">
      This is a success state form validation message!
   </div>
</div>
<div class="col-md-4">
<label for="validationError" class="form-label text-danger">Input with error</label>
<input type="text" class="form-control is-invalid" id="validationError" required>
<div class="invalid-feedback">
   This is an error state form validation message!
</div>

در تصویر نتیجه کد بالا را در مرورگر می بینید:

در کد بالا فقط موارد مربوط به موضوع را بررسی می کنیم:

• div با یک کلاس valid-feedback پیام موفقیت در اعتبار سنجی فرم است.
• div با یک کلاس invalid-feedback پیام خطای اعتبارسنجی فرم است.

هر کلاس ذکر شده در بالا باید در زیر فیلد ورودی استفاده شود و سپس bootstrap با کمک JavaScript تعیین می کند که کدام یک را بر اساس داده ورودی کاربر پس از ارسال فرم نشان دهد.  در این باره بعداً بیشتر توضیح می دهم.

همانطور که در بالا مشاهده شد ، ورودی ها و پیام های اعتبار سنجی فرم متناسب با وضعیت آنها رنگی هستند. علاوه بر این ، توجه داشته باشید که ما برای مطابقت با نتیجه هر اعتبارسنجی خاص از کلاس های is-valid و is-invalid استفاده کردیم.

با این حال ، با Bootstrap همراه با JavaScript هنگام ارسال فرم ، نیازی نیست که این دو کلاس را الزاماً در هر قسمت فرم قرار دهید. بوت استرپ متناسب با نیاز اینکار را برای شما انجام می دهد. اعتبار سنجی بوت استرپ با استفاده از دو شبه کلاس  CSS اعمال می شود: شبه کلاس های valid  و invalid. بوت استرپ به استایل های این کلاس ها نگاه می کند که معمولاً همراه با  کلاس was-validated در برچسب <form> اعمال می شود. برای اعتبار سنجی سمت سرور ، هنوز می توان از کلاس های is-valid و is-invalid به جای شبه کلاس ها استفاده کرد. توجه داشته باشید که اگر از این کلاسها در اعتبارسنجی سمت سرور استفاده می کنید ، نیازی به افزودن کلاس was-validated نیست.

استایل های ابزارکی اعتبار سنجی

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

برای اینکه از ویژگی اعتبار سنجی ابزارکی استفاده کنید ، باید از کلاس valid-tooltip یا invalid-tooltip برای مشخص کردن وضعیت هر اعتبارسنجی خاص استفاده کنید.  این کلاس ها به جای کلاس های valid-feedback و invalid-feedback که در قسمت قبل توضیح داده شد استفاده می شود. علاوه بر این ، شما باید یک عنصر والد با موقعیت relative (ویژگی position: relative) برای نمایش ابزارک در مکان مناسب داشته باشید.

کد زیر با کد بالا یکسان است اما این بار از ابزارک (tooltip) به عنوان استایل اعتبار سنجی استفاده می شود.

<div class="col-md-4 position-relative">
   <label for="validationSuccess" class="form-label text-success">Input with success</label>
   <input type="text" class="form-control" value="Samuel Norton" required>
   <div class="valid-tooltip">
      This is a success state form validation message!
   </div>
</div>
<div class="col-md-4 position-relative">
   <label for="validationError" class="form-label text-danger">Input with error</label>
   <input type="text" class="form-control" id="validationError" required>
   <div class="invalid-tooltip">
      This is an error state form validation message!
   </div>
</div>

در زیر می بینید که این فرم اعتبار سنجی در مرورگر به چه شکل نمایش داده می شود:

استفاده از جاوا اسکریپت

در این مرحله می بینیم که چگونه JavaScript می تواند به استایل های اعتبار سنجی بوت استرپ ما کمک کند تا از ارسال فرم نامعتبر توسط کاربران جلوگیری کند.

ابتدا نگاهی به نشان گذاری زیر بیندازید:

<form class="row g-3 requires-validation" novalidate>
   <div class="col-md-12">
      <label for="username" class="form-label">Username:</label>
      <input type="text" class="form-control" id="username" required>
      <div class="valid-feedback">
         Username looks good!
      </div>
      <div class="invalid-feedback">
         Username is required!
      </div>
   </div>
   <div class="col-md-12">
      <label for="password" class="form-label">Password:</label>
      <input type="text" class="form-control" id="password" required>
      <div class="valid-feedback">
         Password looks good!
      </div>
      <div class="invalid-feedback">
         Password is required!
      </div>
   </div>
   <div class="col-12">
      <button class="btn btn-primary" type="submit">Login</button>
   </div>
</form>

نشان گذاری های html در کد بالا را بررسی می کنیم:

• برچسب form یک ویژگی بولی novalidate دارد. این ویژگی از ابزارک های (tooltip) اعتبار سنجی پیش فرض مرورگر جلوگیری می کند بدون اینکه تاثیری براعتبارسنجی فرم از طریق JavaScript داشته باشد.
• ما در هر فیلد کلاسهای is-valid و is-invalid را استفاده نکردیم. استایل های شبه کلاس های invalid و valid  بوت استرپ آن ها را با استفاده از جاوا اسکریپت در کنترل های فرم اعمال می کنند.
• ما یک کلاس requires-validation را درون برچسب فرم اضافه کردیم. این یک کلاس معنایی از bootstrap نیست. می توانید نام آن را به هر نام کلاسی که ترجیح می دهید تغییر دهید. هدف از این کلاس کمک به جاوا اسکریپت برای واکشی همه عناصر فرم برای استفاده از استایل های اعتبار سنجی بوت استرپ است (توضیح بیشتر در ادامه مقاله).
• در هر قسمت داده یا ورودی ، ویژگی required  را در انتها اضافه کردیم. وجود ویژگی required در هر فیلد به سادگی بیان می کند که این فیلد خاص باید قبل از ارسال فرم پر شود.
• باز هم ، از کلاس های valid-feedback و invalid-feedback در پایین هر فیلد استفاده می کنیم. هر div با یک کلاس valid-feedback حاوی پیام موفقیت اعتبار سنجی فرم است ، و هر div با یک کلاس invalid-feedback حاوی پیام نامعتبر بودن داده های فرم است.

در مرحله بعدی ، کد JavaScript را اضافه می کنیم تا در صورت وجود فیلدهای نامعتبر در هنگام ارسال فرم ، از ارسال فرم جلوگیری شود:

<script>
(function () {
'use strict'
const forms = document.querySelectorAll('.requires-validation')
Array.from(forms)
  .forEach(function (form) {
    form.addEventListener('submit', function (event) {
    if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
    }
  
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

کد جاوا اسکریپت فوق به راحتی همه فرم ها را از طریق متد querySelectorAll دریافت می کند و یک NodeList استاتیک را برمی گرداند که لیستی از عناصر سند که دارای کلاس requires-validation هستند را نشان می دهد.

بعد ، برای هر یک از فرم های پیدا شده ، کد JavaScript یک EventListener اضافه می کند که هر زمان رویداد مشخص شده یعنی ارسال فرم رخ داد ، فراخوانی می شود. بنابراین هر زمان که کاربر فرم را ارسال می کند ، متد form.checkValidity فراخوانی می شود. این متد بررسی می کند که آیا فیلد های داخل فرم محدودیتی دارند یا نه و آیا محدودیت های داده شده را برآورده می کنند. در صورت عدم ارضای محدودیت ها ، مرورگر به سادگی یک رویداد نامعتبر را اعلام می کند و این متد مقدار false برمی گردد.

بنابراین در صورت عدم موفقیت متد checkValidity مقدار false باز می گرداند و کد داخل if  اجرا می شود و هر دو متد JavaScript زیر را فراخوانی می کند:

• متد preventDefault - متدی است که به سادگی از وقوع عملکرد پیش فرض جلوگیری می کند. در اینجا عملکرد پیش فرض ارسال فرم است که از آن جلوگیری می شود.
• متد stopPropagation - متدی است که از انتشار بیشتر رویداد فعلی به متد های مدیریت کننده رویداد ، جلوگیری می کند.

در آخر ، کلاس was-validated را در برچسب فرم اضافه می کند تا حالت اعتبار سنجی فرم و پیام ها را نشان دهد.

بوت استرپ وقتی که روی فرم اعمال می شود ، شبه کلاس های invalid و valid را برای والد با کلاس was-validated طبقه بندی می کند. در واقع می توانید کلاس was-validated را حتی بدون کمک جاوا اسکریپت در برچسب فرم قرار دهید اما با این کار حالت ها و پیام های اعتبار سنجی فرم حتی قبل از ارسال فرم توسط کاربر  نشان داده می شود. با این وجود ، داشتن جاوا اسکریپت برای اعتبار سنجی و  جلوگیری از ارسال فرم نامعتبر ، فرآیند اعتبار سنجی بهتری را برای کاربر فراهم می کند.

در ادامه نگاهی می اندازیم به نتیجه کد بالا در مرورگر:

طراحی یک فرم نمونه

اکنون برای جمع بندی مقاله ، یک صفحه ثبت نام ساده ایجاد می کنیم و می ببینیم چگونه می توانیم استایل های اعتبار سنجی بوت استرپ ۵ را در هر قسمت فرم اعمال کنیم

در زیر نشانه گذاری html این فرم را می بینید:

<div class="form-body">
   <div class="row">
      <div class="form-holder">
         <div class="form-content">
            <div class="form-items">
               <h3>Register Today</h3>
               <p>Fill in the data below.</p>
               <form class="requires-validation" novalidate>
                  <div class="col-md-12">
                     <input class="form-control" type="text" name="name" placeholder="Full Name" required>
                     <div class="valid-feedback">Username field is valid!</div>
                     <div class="invalid-feedback">Username field cannot be blank!</div>
                  </div>
                  <div class="col-md-12">
                     <input class="form-control" type="email" name="email" placeholder="E-mail Address" required>
                     <div class="valid-feedback">Email field is valid!</div>
                     <div class="invalid-feedback">Email field cannot be blank!</div>
                  </div>
                  <div class="col-md-12">
                     <select class="form-select mt-3" required>
                        <option selected disabled value="">Position</option>
                        <option value="jweb">Junior Web Developer</option>
                        <option value="sweb">Senior Web Developer</option>
                        <option value="pmanager">Project Manager</option>
                     </select>
                     <div class="valid-feedback">You selected a position!</div>
                     <div class="invalid-feedback">Please select a position!</div>
                  </div>
                  <div class="col-md-12">
                     <input class="form-control" type="password" name="password" placeholder="Password" required>
                     <div class="valid-feedback">Password field is valid!</div>
                     <div class="invalid-feedback">Password field cannot be blank!</div>
                  </div>
                  <div class="col-md-12 mt-3">
                     <label class="mb-3 mr-1" for="gender">Gender: </label>
                     <input type="radio" class="btn-check" name="gender" id="male" autocomplete="off" required>
                     <label class="btn btn-sm btn-outline-secondary" for="male">Male</label>
                     <input type="radio" class="btn-check" name="gender" id="female" autocomplete="off" required>
                     <label class="btn btn-sm btn-outline-secondary" for="female">Female</label>
                     <input type="radio" class="btn-check" name="gender" id="secret" autocomplete="off" required>
                     <label class="btn btn-sm btn-outline-secondary" for="secret">Secret</label>
                     <div class="valid-feedback mv-up">You selected a gender!</div>
                     <div class="invalid-feedback mv-up">Please select a gender!</div>
                  </div>
                  <div class="form-check">
                     <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                     <label class="form-check-label">I confirm that all data are correct</label>
                     <div class="invalid-feedback">Please confirm that the entered data are all correct!</div>
                  </div>
                  <div class="form-button mt-3">
                     <button id="submit" type="submit" class="btn btn-primary">Register</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

با استایل های CSS زیر ظاهر فرم را سفارشی می کنیم:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap');
*,
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}
 
html,
body {
    height: 100%;
    background-color: #152733;
    overflow: hidden;
}
 
.form-holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}
 
.form-holder .form-content {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 60px;
}
 
.form-content .form-items {
    border: 3px solid #fff;
    padding: 40px;
    display: inline-block;
    width: 100%;
    min-width: 540px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
 
.form-content h3 {
    color: #fff;
    text-align: left;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}
 
.form-content h3.form-title {
    margin-bottom: 30px;
}
 
.form-content p {
    color: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;
}
 
.form-content label,
.was-validated .form-check-input:invalid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: #fff;
}
 
.form-content input[type=text],
.form-content input[type=password],
.form-content input[type=email],
.form-content select {
    width: 100%;
    padding: 9px 20px;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 16px;
}
 
.btn-primary {
    background-color: #6C757D;
    outline: none;
    border: 0px;
    box-shadow: none;
}
 
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #495056;
    outline: none !important;
    border: none !important;
    box-shadow: none;
}
 
.form-content textarea {
    position: static !important;
    width: 100%;
    padding: 8px 20px;
    border-radius: 6px;
    text-align: left;
    background-color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    outline: none;
    resize: none;
    height: 120px;
    -webkit-transition: none;
    transition: none;
    margin-bottom: 14px;
}
 
.form-content textarea:hover,
.form-content textarea:focus {
    border: 0;
    background-color: #ebeff8;
    color: #8D8D8D;
}
 
.mv-up {
    margin-top: -9px !important;
    margin-bottom: 8px !important;
}
 
.invalid-feedback {
    color: #ff606e;
}
 
.valid-feedback {
    color: #2acc80;
}

سرانجام ، برای جلوگیری از ارسال فیلدهای خالی توسط کاربر و همچنین نشان دادن نتیجه های اعتبار سنجی و استایل دهی به پیام های اعتبارسنجی ، از همان کد JavaScript ذکر شده در بالا استفاده خواهیم کرد.

نتیجه را می توانید در لینک زیر ببینید:

جمع بندی

امروزه ساخت وب سایت ها و حتی برنامه های کاربردی بسیار دشوارتر و زمانبرتر از گذشته است. استفاده از روش ها و استایل های اعتبارسنجی Bootstrap 5 راهی آسان ، اما بازخوردی ارزشمند و عملی برای کاربران ، بدون نیاز به ساخت استایل ها ، به شما ارائه می دهد. بهترین دستاورد این است که با اعتبار سنجی بوت استرپ می توانید پیام های اعتبار سنجی فرم ، از جمله استایل های مورد علاقه خود را بدون دوباره کاری و نوشتن کدهای تکراری ، سفارشی کنید.