1. form 태그에 novalidate 속성 추가
<form id="newCodeMappingForm" novalidate>
2. 원한는 input 필드에 required 속성 추가
<div class="mb-3">
<label for="codeMappingName" class="form-label">Code Mapping Name</label><span class="text-danger">*</span></label>
<select class="form-select form-select-sm" id="codeMappingName" name="codeMappingName" required>
<option value="">Select an option...</option>
</select>
</div>
3. ajax 호출 전에 validation 체크
$('#newCodeMappingModal .modal-footer button.btn-primary').on('click', function() {
var form = $('#newCodeMappingForm')[0];
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
if (form.checkValidity() === true) {
save();
}
});
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="" required>
<div class="invalid-feedback">
Please provide a valid first name.
</div>
</div>
<div class="col-md-6">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="" required>
<div class="invalid-feedback">
Please provide a valid last name.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
