Bootstrap is-invalid code example
Example 1: bootstrap forms
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Example 2: bootstrap select
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Example 3: check if form bootstrap is valid js
function form_validate(attr_id){
var result = true;
$('#'+attr_id).validator('validate');
$('#'+attr_id+' .form-group').each(function(){
if($(this).hasClass('has-error')){
result = false;
return false;
}
});
return result;
}
Example 4: bootstrap email address validation
<form> <!--make sure you add this inside a form-->
<div class="form-group"> <!--required to start the form container-->
<label for="InputEmail">Email address</label> <!--"for" needs to match the "id" on the next line to bind it-->
<input type="email" class="form-control" id="InputEmail" placeholder="Enter email"> <!--id, class, and type are required for it too look right, placeholder will edit the text inside the input box-->
<small class="form-text">We'll never share your info.</small> <!--applies small underlining text-->
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="Check">
<label class="form-check-label" for="Check">Check out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>