اضافة Tooltips في التحقق من صحة النموذج Form Validation
-
بنحكي في هذا الدرس عن اضافة Tooltips في Validation، وهي عرض الرسائل بخلفية اخضر اذا كانت الامور تمام. وخلفية احمر اذا كان في مشكلة.
نطبق المثال التالي حتى نفهم الفكره.
<!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>
<div class="input-group has-validation">
<input type="text" class="form-control" id="validationCustom01" value="Layan" required>
<div class=" ">
Looks good!
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom02" class="form-label">Last name</label>
<div class="input-group has-validation">
<input type="text" class="form-control" id="validationCustom02" value="" required>
<div class="invalid-tooltip">
Please add Last name.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom04" class="form-label">Gender</label>
<div class="input-group has-validation">
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>Male</option>
<option>Female</option>
</select>
<div class="invalid-tooltip">
Please select a gender.
</div>
</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-tooltip">
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-tooltip">
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>
النتيجة:
لتطبيق هاذ الحكي بنستخدم classes التالية:
valid-tooltip : اذا ما كان في مشاكل بتم عرض الرسالة بخلفية اخضر.
invalid-tooltip : اذا كان في مشكلة بتم عرض الرسالة بخلفية احمر.
واضفنا هذا control داخل <div> وطبقنا عليه class باسم input-group has-validation
اترك تعليقك