Validation की States
Validation classes valid और invalid fields के लिए messages के साथ green या red feedback दिखाती हैं।
In this page:
Syntax
<form class="needs-validation" novalidate>
<input class="form-control" required>
<div class="invalid-feedback">Error message</div>
</form>
<!-- add .was-validated to the form after checking -->Validation States
novalidate के साथ .needs-validation add करें और check करने के बाद .was-validated toggle करें, या सीधे .is-valid और .is-invalid apply करें। Feedback messages .valid-feedback और .invalid-feedback इस्तेमाल करते हैं और input के बगल में appear होते हैं।
Server-side validation को हमेशा client checks को back up करना चाहिए।
Note:
browser bubbles की बजाय Bootstrap के styles दिखाने के लिए novalidate और JavaScript इस्तेमाल करें।
उदाहरण: Validation states
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body class="p-3">
<div class="container">
<div class="mb-3"><label for="u1" class="form-label">Username</label>
<input id="u1" class="form-control is-valid" value="ada"><div class="valid-feedback">Looks good!</div></div>
<div class="mb-3"><label for="u2" class="form-label">Email</label>
<input id="u2" class="form-control is-invalid" value="not-an-email"><div class="invalid-feedback">Please enter a valid email.</div></div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- feedback text missing होना
- बिना JS logic के validation classes apply करना
- सिर्फ client validation पर depend करना
चैप्टर सारांश
- is-valid और is-invalid fields style करते हैं
- Feedback divs messages hold करते हैं
- was-validated पूरे form को style करता है
- हमेशा server पर भी validate करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: