التحقق من صحة النماذج

<form class="row g-3"> <div class="col-md-4"> <label for="validationDefault01" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="validationDefault01" value="مارك" required> </div> <div class="col-md-4"> <label for="validationDefault02" class="form-label">الاسم الأخير</label> <input type="text" class="form-control" id="validationDefault02" value="أوتو" required> </div> <div class="col-md-4"> <label for="validationDefaultUsername" class="form-label">اسم المستخدم</label> <div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="validationDefaultUsername" required> </div> </div> <div class="col-md-6"> <label for="validationDefault03" class="form-label">المدينة</label> <input type="text" class="form-control" id="validationDefault03" required> </div> <div class="col-md-3"> <label for="validationDefault04" class="form-label">الولاية</label> <select class="form-select" id="validationDefault04" required> <option selected disabled value="">اختر...</option> <option>...</option> </select> </div> <div class="col-md-3"> <label for="validationDefault05" class="form-label">الرمز البريدي</label> <input type="text" class="form-control" id="validationDefault05" required> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">إرسال النموذج</button> </div> </form>

<form class="row g-3 needs-validation" novalidate> <div class="col-md-4"> <label for="validationCustom01" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="validationCustom01" value="مارك" required> <div class="valid-feedback"> يبدو جيدًا! </div> </div> <div class="col-md-4"> <label for="validationCustom02" class="form-label">الاسم الأخير</label> <input type="text" class="form-control" id="validationCustom02" value="أوتو" required> <div class="valid-feedback"> يبدو جيدًا! </div> </div> <div class="col-md-4"> <label for="validationCustomUsername" class="form-label">اسم المستخدم</label> <div class="input-group has-validation"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="validationCustomUsername" required> <div class="invalid-feedback"> يرجى اختيار اسم مستخدم. </div> </div> </div> <div class="col-md-6"> <label for="validationCustom03" class="form-label">المدينة</label> <input type="text" class="form-control" id="validationCustom03" required> <div class="invalid-feedback"> يرجى تقديم مدينة صالحة. </div> </div> <div class="col-md-3"> <label for="validationCustom04" class="form-label">الولاية</label> <select class="form-select" id="validationCustom04" required> <option selected disabled value="">اختر...</option> <option>...</option> </select> <div class="invalid-feedback"> يرجى اختيار ولاية صالحة. </div> </div> <div class="col-md-3"> <label for="validationCustom05" class="form-label">الرمز البريدي</label> <input type="text" class="form-control" id="validationCustom05" required> <div class="invalid-feedback"> يرجى تقديم رمز بريدي صالح. </div> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required> <label class="form-check-label" for="invalidCheck"> الموافقة على الشروط والأحكام </label> <div class="invalid-feedback"> يجب أن توافق قبل الإرسال. </div> </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">إرسال النموذج</button> </div> </form> <script> // مثال على JavaScript للتحقق المخصص (function () { 'use strict' // جلب جميع النماذج التي تحتاج إلى التحقق var forms = document.querySelectorAll('.needs-validation') // التكرار عليها ومنع الإرسال Array.prototype.slice.call(forms) .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add('was-validated') }, false) }) })() </script>

<!-- ملاحظات صالحة --> <div class="mb-3"> <label for="validInput" class="form-label">إدخال صالح</label> <input type="text" class="form-control is-valid" id="validInput" value="قيمة صالحة"> <div class="valid-feedback"> رائع! هذا يبدو جيدًا. </div> </div> <!-- ملاحظات غير صالحة --> <div class="mb-3"> <label for="invalidInput" class="form-label">إدخال غير صالح</label> <input type="text" class="form-control is-invalid" id="invalidInput"> <div class="invalid-feedback"> يرجى تقديم قيمة صالحة. </div> </div> <!-- تلميح صالح --> <div class="mb-3 position-relative"> <label for="validTooltip" class="form-label">تلميح صالح</label> <input type="text" class="form-control is-valid" id="validTooltip" value="قيمة صالحة"> <div class="valid-tooltip"> يبدو جيدًا! </div> </div> <!-- تلميح غير صالح --> <div class="mb-3 position-relative"> <label for="invalidTooltip" class="form-label">تلميح غير صالح</label> <input type="text" class="form-control is-invalid" id="invalidTooltip"> <div class="invalid-tooltip"> يرجى تقديم قيمة صالحة. </div> </div>

<form> <!-- التحقق الصالح من جانب الخادم --> <div class="mb-3"> <label for="serverValidEmail" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control is-valid" id="serverValidEmail" value="user@example.com"> <div class="valid-feedback"> البريد الإلكتروني متاح. </div> </div> <!-- التحقق غير الصالح من جانب الخادم --> <div class="mb-3"> <label for="serverInvalidUsername" class="form-label">اسم المستخدم</label> <input type="text" class="form-control is-invalid" id="serverInvalidUsername" value="admin"> <div class="invalid-feedback"> اسم المستخدم هذا مستخدم بالفعل. يرجى اختيار اسم آخر. </div> </div> <!-- أخطاء تحقق متعددة --> <div class="mb-3"> <label for="serverInvalidPassword" class="form-label">كلمة المرور</label> <input type="password" class="form-control is-invalid" id="serverInvalidPassword"> <div class="invalid-feedback"> <ul class="mb-0"> <li>يجب أن تكون كلمة المرور 8 أحرف على الأقل</li> <li>يجب أن تحتوي كلمة المرور على حرف كبير واحد على الأقل</li> <li>يجب أن تحتوي كلمة المرور على رقم واحد على الأقل</li> </ul> </div> </div> <button type="submit" class="btn btn-primary">إرسال</button> </form>

<form class="was-validated"> <!-- إدخال معطل (بدون تحقق) --> <div class="mb-3"> <label for="disabledInput" class="form-label">إدخال معطل</label> <input type="text" class="form-control" id="disabledInput" disabled required> </div> <!-- إدخال للقراءة فقط (بدون تحقق) --> <div class="mb-3"> <label for="readonlyInput" class="form-label">إدخال للقراءة فقط</label> <input type="text" class="form-control" id="readonlyInput" value="قيمة للقراءة فقط" readonly required> </div> <!-- إدخال عادي (تم التحقق) --> <div class="mb-3"> <label for="regularInput" class="form-label">إدخال عادي</label> <input type="text" class="form-control" id="regularInput" required> <div class="invalid-feedback"> هذا الحقل مطلوب. </div> </div> <button type="submit" class="btn btn-primary">إرسال</button> </form>

<form class="row g-3 needs-validation" novalidate> <!-- التحقق من البريد الإلكتروني --> <div class="col-md-6"> <label for="validationEmail" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="validationEmail" required> <div class="invalid-feedback"> يرجى تقديم عنوان بريد إلكتروني صالح. </div> </div> <!-- التحقق من عنوان URL --> <div class="col-md-6"> <label for="validationUrl" class="form-label">الموقع الإلكتروني</label> <input type="url" class="form-control" id="validationUrl" required> <div class="invalid-feedback"> يرجى تقديم عنوان URL صالح. </div> </div> <!-- التحقق من الرقم مع min/max --> <div class="col-md-6"> <label for="validationNumber" class="form-label">العمر (18-120)</label> <input type="number" class="form-control" id="validationNumber" min="18" max="120" required> <div class="invalid-feedback"> يجب أن يكون العمر بين 18 و120. </div> </div> <!-- التحقق من التاريخ --> <div class="col-md-6"> <label for="validationDate" class="form-label">تاريخ الميلاد</label> <input type="date" class="form-control" id="validationDate" required> <div class="invalid-feedback"> يرجى تحديد تاريخ صالح. </div> </div> <!-- التحقق من النمط --> <div class="col-md-6"> <label for="validationPhone" class="form-label">رقم الهاتف</label> <input type="tel" class="form-control" id="validationPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required> <div class="invalid-feedback"> يجب أن يكون رقم الهاتف بالتنسيق: 123-456-7890 </div> </div> <!-- التحقق من الطول --> <div class="col-md-6"> <label for="validationPassword" class="form-label">كلمة المرور</label> <input type="password" class="form-control" id="validationPassword" minlength="8" maxlength="20" required> <div class="invalid-feedback"> يجب أن تكون كلمة المرور من 8 إلى 20 حرفًا. </div> </div> <!-- التحقق من منطقة النص --> <div class="col-12"> <label for="validationTextarea" class="form-label">التعليقات</label> <textarea class="form-control" id="validationTextarea" rows="3" maxlength="500" required></textarea> <div class="invalid-feedback"> يرجى تقديم تعليقات (بحد أقصى 500 حرف). </div> </div> <!-- التحقق من القائمة المنسدلة --> <div class="col-12"> <label for="validationCountry" class="form-label">الدولة</label> <select class="form-select" id="validationCountry" required> <option value="">اختر...</option> <option value="us">الولايات المتحدة</option> <option value="uk">المملكة المتحدة</option> <option value="ca">كندا</option> </select> <div class="invalid-feedback"> يرجى اختيار دولة. </div> </div> <!-- التحقق من الملف --> <div class="col-12"> <label for="validationFile" class="form-label">تحميل السيرة الذاتية (PDF فقط)</label> <input type="file" class="form-control" id="validationFile" accept=".pdf" required> <div class="invalid-feedback"> يرجى تحميل ملف PDF. </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">إرسال النموذج</button> </div> </form>