<main id="main" class="main">

<div class="pagetitle">

<h1>State</h1>

<nav>

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="index.html">Home</a></li>

<li class="breadcrumb-item">Forms</li>

<li class="breadcrumb-item active">elements</li>

</ol>

</nav>

</div><!-- End Page Title -->

<section class="section">

<div class="row">

<div class="col-lg-6">

<div class="card">

<div class="card-body">

<h5 class="card-title">Browser Default</h5>

<p>Browser default validation with using the <code>required</code> keyword. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.</p>

<!-- Browser Default Validation -->

<form class="row g-3">

<div class="col-md-4">

<label for="validationDefault01" class="form-label">state name</label>

<input type="text" class="form-control" id="validationDefault01" value="John" required>

</div>

<div class="col-md-4">

<label for="validationDefault02" class="form-label">state code</label>

<input type="text" class="form-control" id="validationDefault02" value="Doe" required>

</div>

<div class="col-md-4">

<label for="validationDefaultUsername" class="form-label">Username</label>

<div class="input-group">

<span class="input-group-text" id="inputGroupPrepend2"></span>

<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>

</div>

</div>

<div class="col-md-6">

<label for="validationDefault03" class="form-label">City</label>

<input type="text" class="form-control" id="validationDefault03" required>

</div>

<div class="col-md-3">

<label for="validationDefault04" class="form-label">State</label>

<select class="form-select" id="validationDefault04" required>

<option selected disabled value="">Choose...</option>

<option>...</option>

</select>

</div>

<div class="col-md-3">

<label for="validationDefault05" class="form-label">Zip</label>

<input type="text" class="form-control" id="validationDefault05" required>

</div>

<div class="col-12">

<div class="form-check">

<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>

<label class="form-check-label" for="invalidCheck2">

Agree to terms and conditions

</label>

</div>

</div>

<div class="col-12">

<button class="btn btn-primary" type="submit">Submit form</button>

</div>

</form>

<!-- End Browser Default Validation -->

</div>

</div>

</div>

<div class="col-lg-6">

<div class="card">

<div class="card-body">

<h5 class="card-title">Custom Styled Validation</h5>

<p>For custom Bootstrap form validation messages, you’ll need to add the <code>novalidate</code> boolean attribute to your <code>&lt;form&gt;</code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. </p>

</div>

</div>

<div class="card">

<div class="card-body">

<h5 class="card-title">Custom Styled Validation with Tooltips</h5>

<p>If your form layout allows it, you can swap the <code>.{valid|invalid}-feedback</code> classes for .<code>{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup. </p>

<!-- Custom Styled Validation with Tooltips -->

<form class="row g-3 needs-validation" novalidate>

<div class="col-md-4 position-relative">

<label for="validationTooltip01" class="form-label">First name</label>

<input type="text" class="form-control" id="validationTooltip01" value="John" required>

<div class="valid-tooltip">

Looks good!

</div>

</div>

<div class="col-md-4 position-relative">

<label for="validationTooltip02" class="form-label">Last name</label>

<input type="text" class="form-control" id="validationTooltip02" value="Doe" required>

<div class="valid-tooltip">

Looks good!

</div>

</div>

<div class="col-md-4 position-relative">

<label for="validationTooltipUsername" class="form-label">Username</label>

<div class="input-group has-validation">

<span class="input-group-text" id="validationTooltipUsernamePrepend"></span>

<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>

<div class="invalid-tooltip">

Please choose a unique and valid username.

</div>

</div>

</div>

<div class="col-md-6 position-relative">

<label for="validationTooltip03" class="form-label">City</label>

<input type="text" class="form-control" id="validationTooltip03" required>

<div class="invalid-tooltip">

Please provide a valid city.

</div>

</div>

<div class="col-md-3 position-relative">

<label for="validationTooltip04" class="form-label">State</label>

<select class="form-select" id="validationTooltip04" required>

<option selected disabled value="">Choose...</option>

<option>...</option>

</select>

<div class="invalid-tooltip">

Please select a valid state.

</div>

</div>

<div class="col-md-3 position-relative">

<label for="validationTooltip05" class="form-label">Zip</label>

<input type="text" class="form-control" id="validationTooltip05" required>

<div class="invalid-tooltip">

Please provide a valid zip.

</div>

</div>

<div class="col-12">

<button class="btn btn-primary" type="submit">Submit form</button>

</div>

</form><!-- End Custom Styled Validation with Tooltips -->

</div>

</div>

</div>

</div>

</section>

</main><!-- End #main -->