Я пытаюсь проверить форму для пустых полей с помощью начальной загрузки.Обязательные поля оформляются правильно при отправке и проверке с помощью метода form.checkValidity ().Некоторые поля не имеют обязательного атрибута, но они оформлены как правильные.Почему эти необязательные поля проверены на достоверность?Это нормальное поведение начальной загрузки или что-то не так?
Вот код, который я изменил из документов: https://jsfiddle.net/ksilix/v01w3a4h/43/
HTML:
<form id="form1" novalidate>
<div class="form-group">
<label for="validationCustom01">Name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="name required" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Required!
</div>
</div>
<div class="form-group">
<label for="validationCustom02">Optional</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Optional">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Required!
</div>
</div>
<label for="radio-group1">Optional radio checked</label>
<div class="form-group" id="radio-group1">
<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="radio1" name="radios1" checked>
<label class="form-check-label" for="radio1">
Opt1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="2" id="radio2" name="radios1">
<label class="form-check-label" for="radio2">
Opt2
</label>
</div>
</div>
<label for="radio-group2">Optional radio not checked</label>
<div class="form-group" id="radio-group2">
<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="radio3" name="radios2">
<label class="form-check-label" for="radio3">
Opt3
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="2" id="radio4" name="radios2">
<label class="form-check-label" for="radio4">
Opt4
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Javascript:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var form = document.getElementById('form1');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();