<form class="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-6">
<label for="FirstName">First Name</label>
<input type="text" class="form-control" id="FirstName" placeholder="First Name" required>
<div class="invalid-feedback">
Please input a valid First Name
</div>
</div>
<div class="form-group col-md-6">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" id="LastName" placeholder="Last Name" required>
<div class="invalid-feedback">
Please input a valid First Name
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="City">City</label>
<input type="text" class="form-control" placeholder="City" id="City" required>
<div class="invalid-feedback">
Please input a valid First Name
</div>
</div>
<div class="form-group col-md-3">
<label for="validationCustom04">State</label>
<select class="form-control" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option value="三藩市">三藩市</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="form-group col-md-3">
<label for="Road">Road</label>
<input type="text" class="form-control" id="Road" placeholder="Road" required>
<div class="invalid-feedback">
Please input a valid First Name
</div>
</div>
</div>
<button type="submit" class="btn btn-warning btn-lg font-weight-bold d-block ml-auto mr-4 w-25">表單提交</button>
</form>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName("needs-validation");
var validation = Array.prototype.filter.call(forms, function(forms) {
forms.addEventListener('submit', function(event) {
if (forms.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
forms.classList.add('was-validated');
}, false);
});
}, false);
})();
