<div id="app">
<form>
<label>
<input type="checkbox" name="fruit" required="required">りんご
</label>
<label>
<input type="checkbox" name="fruit" required="required">みかん
</label>
<label>
<input type="checkbox" name="fruit" required="required">ばなな
</label>
<button id="submit">送信</button>
<input type="text" required="required">
</form>
</div>body {background-color: #f1f8f9;}
#app {display: flex;justify-content: center;margin-top: 50px;}
form {width: 600px;padding: 20px 20px 40px 40px;background-color: #fff;border-radius: 4px;}
button {display: block;margin-top: 20px;}
input[type=text] {display: none;}
h1 {font-size: 16px;margin-bottom: 20px;}const checkBoxes = $('[name="fruit"]');
const submitButton = $('#submit');
const errorMessage = 'いずれか1つ以上を選択してください。';
checkBoxes.on('change', (e) => {
const isCheckedCount = checkBoxes.filter(':checked');
isCheckedCount.length > 0
? checkBoxes.attr('required', false)
: checkBoxes.attr('required', true);
});
submitButton.on('click', () => {
checkBoxes.on('invalid', (e) => {
const isInvalid = e.target.validity.valueMissing;
isInvalid
? e.target.setCustomValidity(errorMessage)
: e.target.setCustomValidity('');
});
});
External CSS
This Pen doesn't use any external CSS resources.