التحقق من صحة النموذج Form Validation
-
بنحكي في هذا الدرس عن Validation، الي بيعني ان نعمل تحقق من صحة البيانات المدخلة في form، قبل ما نعمل Submit. واكيد هذا الموضوع بساعدة على تجنب ادخال بيانات او معلومات غير صحيحه مثل البريد الإلكتروني مثلا اجباري يدخل صيغة صحيحه، رقم الهاتف لازم يكون بصيغة صحيحه. ممكن التحكم بكلمة المرور مثلا بمواصفات معينه... الخ
هذاValidation بتم على جهاز العميل Client Side
تمام نطبق مثال حتى نفهم الموضوع.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<label for="" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Layan" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="" required>
<div class="invalid-feedback">
Please add Last name.
</div>
</div>
<div class="col-md-6">
<label for="validationCustom04" class="form-label">Gender</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>Male</option>
<option>Female</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-6">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</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">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
</div>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
@@#use strict@@#
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll(@@#.needs-validation@@#)
// Loop over them and prevent submission
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>
</body>
</html>
النتيجة:
بعد الضغط على Submit بتكون النتيجة:
تمام نفهم شو عملنا.
في البداية طبقنا class باسم needs-validation على Form
نوخذ validation على الاسم الأول:
الكود:
<div class="col-md-6">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Layan" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
اضفنا في البداية <div> وطبقنا عليه class باسم col-md-6 الي بيعن ان سيتم عرض هاذ control في عمود بعرض 50%، بعد هيك اضفنا <label> بهدف عرض نص وهنا يساوي First name.
بعد هيك اضفنا <input> من نوع text وطبقنا عليه class باسم form-control واضفنا id يساوي validationCustom01 واضفنا value بقيمة Layan . هذه القيمة تعني ان ما حيتم التحقق لان في قيمة. واضفنا <div> اخر اشي وطبقنا عليه class باسم valid-feedback الي بيعني ان النص الموجود هنا هو الي بيظهر في حال ان تم التحقق والامور تمام. اذا كانت الامور تمام بنعرض النص Look good.
في الكود الخاص ب Last Name
الكود:
<div class="col-md-6">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="" required>
<div class="invalid-feedback">
Please add Last name.
</div>
</div>
اضنفا نفس الكود السابق باستثناء ان ما في value افتراضية. و بالتالي سيتم تطبيق validation عليه. في اخر الكود اضفنا الامر required الي بيعني ان هذا الحقل اجباري.(حاول تحذف هذا الامر اكيد بتكون النتيجة ما بتم التحقق من control). اخيرا اضفنا <div> وطبقنا عليها class باسم invalid-feedback ويحتوي على نص معين . هذا النص هو الي ببين رسالة للمستخدم. توضيح للمشكلة.
ونفس الكلام طبقنا على باقي control
اضنا في اخر الصفحة كود JavaScript مسوؤل عن التحقق من البيانات عند النقر فوق Submit.
اترك تعليقك