|
|
|
|
@ -1,14 +1,14 @@
|
|
|
|
|
---
|
|
|
|
|
import Head from '@components/_head.astro';
|
|
|
|
|
import Footer from '@components/dashboard/_footer.astro';
|
|
|
|
|
import Topbar from '@components/dashboard/_topbar.astro';
|
|
|
|
|
import Sidenav from '@components/dashboard/_sidenav.astro';
|
|
|
|
|
import Scripts from '@components/_scripts.astro';
|
|
|
|
|
import Head from "@components/_head.astro";
|
|
|
|
|
import Footer from "@components/dashboard/_footer.astro";
|
|
|
|
|
import Topbar from "@components/dashboard/_topbar.astro";
|
|
|
|
|
import Sidenav from "@components/dashboard/_sidenav.astro";
|
|
|
|
|
import Scripts from "@components/_scripts.astro";
|
|
|
|
|
|
|
|
|
|
const title = 'AdminLTE 4 | General Form Elements';
|
|
|
|
|
const path = '../../../dist';
|
|
|
|
|
const mainPage = 'forms';
|
|
|
|
|
const page = 'general';
|
|
|
|
|
const title = "AdminLTE 4 | General Form Elements";
|
|
|
|
|
const path = "../../../dist";
|
|
|
|
|
const mainPage = "forms";
|
|
|
|
|
const page = "general";
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
@ -38,7 +38,9 @@ const page = 'general';
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
<ol class="breadcrumb float-sm-end">
|
|
|
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
|
|
<li class="breadcrumb-item active" aria-current="page">General Form</li>
|
|
|
|
|
<li class="breadcrumb-item active" aria-current="page">
|
|
|
|
|
General Form
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -53,42 +55,557 @@ const page = 'general';
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<!--begin::Row-->
|
|
|
|
|
<div class="row g-4">
|
|
|
|
|
<!-- Start column -->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="callout callout-info">
|
|
|
|
|
For detailed documentaion of Form visit <a
|
|
|
|
|
href="https://getbootstrap.com/docs/5.3/forms/overview/"
|
|
|
|
|
target="_blank"
|
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
|
class="fw-bold"
|
|
|
|
|
>
|
|
|
|
|
Bootstrap Form
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<!-- general form elements -->
|
|
|
|
|
<!--begin::Quick Example-->
|
|
|
|
|
<div class="card card-primary card-outline">
|
|
|
|
|
<!--begin::Header-->
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">
|
|
|
|
|
Quick Example
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-title">Quick Example</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Header-->
|
|
|
|
|
<!--begin::Form-->
|
|
|
|
|
<form>
|
|
|
|
|
<!--begin::Body-->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
|
|
|
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
|
|
|
|
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
|
|
|
|
<label for="exampleInputEmail1" class="form-label"
|
|
|
|
|
>Email address</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="exampleInputEmail1"
|
|
|
|
|
aria-describedby="emailHelp"
|
|
|
|
|
/>
|
|
|
|
|
<div id="emailHelp" class="form-text">
|
|
|
|
|
We'll never share your email with anyone else.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="exampleInputPassword1" class="form-label">Password</label>
|
|
|
|
|
<input type="password" class="form-control" id="exampleInputPassword1">
|
|
|
|
|
<label for="exampleInputPassword1" class="form-label"
|
|
|
|
|
>Password</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="exampleInputPassword1"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
<input type="file" class="form-control" id="inputGroupFile02">
|
|
|
|
|
<label class="input-group-text" for="inputGroupFile02">Upload</label>
|
|
|
|
|
<input
|
|
|
|
|
type="file"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="inputGroupFile02"
|
|
|
|
|
/>
|
|
|
|
|
<label class="input-group-text" for="inputGroupFile02"
|
|
|
|
|
>Upload</label
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 form-check">
|
|
|
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
|
|
|
|
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
id="exampleCheck1"
|
|
|
|
|
/>
|
|
|
|
|
<label class="form-check-label" for="exampleCheck1"
|
|
|
|
|
>Check me out</label
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
<!--begin::Footer-->
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<button type="submit" class="btn btn-primary"
|
|
|
|
|
>Submit</button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Footer-->
|
|
|
|
|
</form>
|
|
|
|
|
<!--end::Form-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Quick Example-->
|
|
|
|
|
<!--begin::Input Group-->
|
|
|
|
|
<div class="card card-success card-outline">
|
|
|
|
|
<!--begin::Header-->
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">Input Group</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Header-->
|
|
|
|
|
<!--begin::Body-->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder="Username"
|
|
|
|
|
aria-label="Username"
|
|
|
|
|
aria-describedby="basic-addon1"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder="Recipient's username"
|
|
|
|
|
aria-label="Recipient's username"
|
|
|
|
|
aria-describedby="basic-addon2"
|
|
|
|
|
/>
|
|
|
|
|
<span class="input-group-text" id="basic-addon2"
|
|
|
|
|
>@example.com</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="basic-url" class="form-label"
|
|
|
|
|
>Your vanity URL</label
|
|
|
|
|
>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<span class="input-group-text" id="basic-addon3"
|
|
|
|
|
>https://example.com/users/</span
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="basic-url"
|
|
|
|
|
aria-describedby="basic-addon3 basic-addon4"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-text" id="basic-addon4">
|
|
|
|
|
Example help text goes outside the input group.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
<span class="input-group-text">$</span>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
aria-label="Amount (to the nearest dollar)"
|
|
|
|
|
/>
|
|
|
|
|
<span class="input-group-text">.00</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder="Username"
|
|
|
|
|
aria-label="Username"
|
|
|
|
|
/>
|
|
|
|
|
<span class="input-group-text">@</span>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder="Server"
|
|
|
|
|
aria-label="Server"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<span class="input-group-text">With textarea</span>
|
|
|
|
|
<textarea class="form-control" aria-label="With textarea"
|
|
|
|
|
></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
<!--begin::Footer-->
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
|
|
|
<button type="submit" class="btn btn-success">Submit</button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Footer-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Input Group-->
|
|
|
|
|
<!--begin::Horizontal Form-->
|
|
|
|
|
<div class="card card-warning card-outline">
|
|
|
|
|
<!--begin::Header-->
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">Horizontal Form</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Header-->
|
|
|
|
|
<!--begin::Form-->
|
|
|
|
|
<form>
|
|
|
|
|
<!--begin::Body-->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row mb-3">
|
|
|
|
|
<label for="inputEmail3" class="col-sm-2 col-form-label"
|
|
|
|
|
>Email</label
|
|
|
|
|
>
|
|
|
|
|
<div class="col-sm-10">
|
|
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="inputEmail3"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mb-3">
|
|
|
|
|
<label
|
|
|
|
|
for="inputPassword3"
|
|
|
|
|
class="col-sm-2 col-form-label">Password</label
|
|
|
|
|
>
|
|
|
|
|
<div class="col-sm-10">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="inputPassword3"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<fieldset class="row mb-3">
|
|
|
|
|
<legend class="col-form-label col-sm-2 pt-0"
|
|
|
|
|
>Radios</legend
|
|
|
|
|
>
|
|
|
|
|
<div class="col-sm-10">
|
|
|
|
|
<div class="form-check">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="radio"
|
|
|
|
|
name="gridRadios"
|
|
|
|
|
id="gridRadios1"
|
|
|
|
|
value="option1"
|
|
|
|
|
checked
|
|
|
|
|
/>
|
|
|
|
|
<label class="form-check-label" for="gridRadios1">
|
|
|
|
|
First radio
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-check">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="radio"
|
|
|
|
|
name="gridRadios"
|
|
|
|
|
id="gridRadios2"
|
|
|
|
|
value="option2"
|
|
|
|
|
/>
|
|
|
|
|
<label class="form-check-label" for="gridRadios2">
|
|
|
|
|
Second radio
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-check disabled">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="radio"
|
|
|
|
|
name="gridRadios"
|
|
|
|
|
id="gridRadios3"
|
|
|
|
|
value="option3"
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
|
|
|
|
<label class="form-check-label" for="gridRadios3">
|
|
|
|
|
Third disabled radio
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<div class="row mb-3">
|
|
|
|
|
<div class="col-sm-10 offset-sm-2">
|
|
|
|
|
<div class="form-check">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="gridCheck1"
|
|
|
|
|
/>
|
|
|
|
|
<label class="form-check-label" for="gridCheck1">
|
|
|
|
|
Example checkbox
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
<!--begin::Footer-->
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<button type="submit" class="btn btn-warning"
|
|
|
|
|
>Sign in</button
|
|
|
|
|
>
|
|
|
|
|
<button type="submit" class="btn float-end">Cancel</button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Footer-->
|
|
|
|
|
</form>
|
|
|
|
|
<!--end::Form-->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- /.card -->
|
|
|
|
|
<!--end::Horizontal Form-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<!--begin::Different Height-->
|
|
|
|
|
<div class="card card-secondary card-outline">
|
|
|
|
|
<!--begin::Header-->
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">Different Height</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Header-->
|
|
|
|
|
<!--begin::Body-->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<input
|
|
|
|
|
class="form-control form-control-lg"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder=".form-control-lg"
|
|
|
|
|
aria-label=".form-control-lg example"
|
|
|
|
|
/>
|
|
|
|
|
<br />
|
|
|
|
|
<input
|
|
|
|
|
class="form-control"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Default input"
|
|
|
|
|
aria-label="default input example"
|
|
|
|
|
/>
|
|
|
|
|
<br />
|
|
|
|
|
<input
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder=".form-control-sm"
|
|
|
|
|
aria-label=".form-control-sm example"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Different Height-->
|
|
|
|
|
<!--begin::Different Width-->
|
|
|
|
|
<div class="card card-danger card-outline">
|
|
|
|
|
<!--begin::Header-->
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">Different Width</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Header-->
|
|
|
|
|
<!--begin::Body-->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<!--begin::Row-->
|
|
|
|
|
<div class="row">
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder=".col-3"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-4">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder=".col-4"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-5">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
placeholder=".col-5"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Row-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Different Width-->
|
|
|
|
|
<!--begin::Form Validation-->
|
|
|
|
|
<div class="card card-info card-outline">
|
|
|
|
|
<!--begin::Header-->
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">Form Validation</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Header-->
|
|
|
|
|
<!--begin::Form-->
|
|
|
|
|
<form class="needs-validation" novalidate>
|
|
|
|
|
<!--begin::Body-->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<!--begin::Row-->
|
|
|
|
|
<div class="row g-3">
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<label for="validationCustom01" class="form-label"
|
|
|
|
|
>First name</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="validationCustom01"
|
|
|
|
|
value="Mark"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<div class="valid-feedback">Looks good!</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<label for="validationCustom02" class="form-label"
|
|
|
|
|
>Last name</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="validationCustom02"
|
|
|
|
|
value="Otto"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<div class="valid-feedback">Looks good!</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<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>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<label for="validationCustom03" class="form-label"
|
|
|
|
|
>City</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="validationCustom03"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
|
Please provide a valid city.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<label for="validationCustom04" class="form-label"
|
|
|
|
|
>State</label
|
|
|
|
|
>
|
|
|
|
|
<select
|
|
|
|
|
class="form-select"
|
|
|
|
|
id="validationCustom04"
|
|
|
|
|
required
|
|
|
|
|
>
|
|
|
|
|
<option selected disabled value="">Choose...</option
|
|
|
|
|
>
|
|
|
|
|
<option>...</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
|
Please select a valid state.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<label for="validationCustom05" class="form-label"
|
|
|
|
|
>Zip</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="validationCustom05"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
|
Please provide a valid zip.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
<!--begin::Col-->
|
|
|
|
|
<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>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Row-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
<!--begin::Footer-->
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<button class="btn btn-info" type="submit"
|
|
|
|
|
>Submit form</button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Footer-->
|
|
|
|
|
</form>
|
|
|
|
|
<!--end::Form-->
|
|
|
|
|
<!--begin::JavaScript-->
|
|
|
|
|
<script is:inline>
|
|
|
|
|
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
|
|
|
(() => {
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
|
|
|
|
const forms =
|
|
|
|
|
document.querySelectorAll(".needs-validation");
|
|
|
|
|
|
|
|
|
|
// Loop over them and prevent submission
|
|
|
|
|
Array.from(forms).forEach((form) => {
|
|
|
|
|
form.addEventListener(
|
|
|
|
|
"submit",
|
|
|
|
|
(event) => {
|
|
|
|
|
if (!form.checkValidity()) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form.classList.add("was-validated");
|
|
|
|
|
},
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
<!--end::JavaScript-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Form Validation-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Col-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--end::Row-->
|
|
|
|
|
</div>
|
|
|
|
|
@ -103,6 +620,5 @@ const page = 'general';
|
|
|
|
|
<!--begin::Script-->
|
|
|
|
|
<Scripts path={path} />
|
|
|
|
|
<!--end::Script-->
|
|
|
|
|
</body>
|
|
|
|
|
<!--end::Body-->
|
|
|
|
|
</body><!--end::Body-->
|
|
|
|
|
</html>
|
|
|
|
|
|
Daniel
2 years ago