كيف أستطيع إلزام المستخدِم على تعبئة جميع الحقول بإستخدام HTML فقط؟

اﻵن تستطيع فعل كل ما يخطر ببالك باستخدام HTML5.
ما تسأل عنهُ هو سمه required التي تعني (مطلوب). 
أتت مع إصدار HTML5 وهذه تُستخدم فقط مع الحقول INPUT 
وهذه السمه تقوم بعمل عظيم. كيف؟!
عندما يتم الضغط على زر submit المسئول عن إرسال متحتويات النموذج وقد ترك المُستخدم حقل فارغ تظهر له رسالة تنبيه بشكل جميل بأن لا يُمكن ترك هذا الحقل فارغ.
لنرى مثال على ذلك:

<form action="/login">
  Username: <input type="text" name="user" required>
  Password: <input type="password" name="pass" required>
  <input type="submit">
</form>

كما تُشاهد في هذا المثال قمت بانشاء نموذج مكون من ثلاث عناصر.
اﻷول ﻷسم المستخدم من نوع نص text وله تعريف باسم user وفي نهايته استخدمنا سمة required لضرورة ملء الحقل.
الثاني لكلمة المرور من نوع كلمة مرور password باسم pass وايضاً بهِ required للضرورة.
الثالث لإرسال البيانات من نوع إرسال submit.

إذا ترك المستخدم حقل اسم المستخدم فارغ وضغط على إرسال ستظهر له رسالة تنبيه بضرورة ملء بيانات هذا الحقل وكذلك مع حقل كلمة المرور.
وهذا يتم حسب ترتيب الحقول المتروكه فارغة, بمعنى إذا كان هناك اكثر من حقل وكان على سبيل المثال الحقل الثالث تم تركه فارغ وكذلك ما يليه مباشرةً فارغ ايضاً سيتم التنبيه عن ضرورة ملء الحقل الثالث اولاً وهكذا.

لمشاهده مثال حي على هذا المثال من هـنـا.
المصدر
ملحوظه هامه: هذهِ السمه required غير مدعومه في المتصفحات القديمة التي لا تدعم HTML5.