Bootstrap 5: Form Validation

فهرست مطالب

    نمایش فهرست مطالب

ﻡﺮﻓ ﯽﺠﻨﺳ ﺭﺎﺒﺘﻋﺍ

Valid.
Please fill out this field.
Valid.
Please fill out this field.
Valid.
Check this checkbox to continue.

.ﺩﻮﺷ ﻡﺎﺠﻧﺍ ﻡﺮﻓ ﻝﺎﺳﺭﺍ ﺯﺍ ﻞﺒﻗ ﺪﯾﺎﺑ ﺎﯾ ، .ﺖﺳﺍ ﻢﮐ ﯼﺰﯿﭼ ﻪﭼ ﺪﯿﯾﻮﮕﺑ ﺮﺑﺭﺎﮐ ﻪﺑ ﺖﺣﺍﺮﺻ ﻪﺑ

ﻝﺎﺜﻣ

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺖﺳﺍ ﻩﺪﺷ ﻢﮔ ﻡﺮﻓ ﻝﺎﺳﺭﺍ ﺯﺍ ﻞﺒﻗ ﻪﮐ ﯼﺩﺭﺍﻮﻣ ﻥﺩﺍﺩ ﻥﺎﺸﻧ ﯼﺍﺮﺑ 

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
    <label class="form-check-label" for="myCheck">I agree on blabla.</label>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Check this checkbox to continue.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Form Validation</h3>
  <p>Try to submit the form.</p>
    
  <form action="/action_page.php" class="was-validated">
    <div class="mb-3 mt-3">
      <label for="uname" class="form-label">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="mb-3">
      <label for="pwd" class="form-label">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" id="myCheck"  name="remember" required>
      <label class="form-check-label" for="myCheck">I agree on blabla.</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </div>
  <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>