79 lines
3.2 KiB
Plaintext
79 lines
3.2 KiB
Plaintext
|
<head>
|
||
|
|
<link rel="stylesheet" href="/styles/form.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<div class="bot-creation-container">
|
||
|
|
<h1>同位体情報の登録</h1>
|
||
|
|
<p class="required-note">* 必須の情報です</p>
|
||
|
|
<form id="botForm" action="/contract" method="POST" class="bot-creation-form">
|
||
|
|
<label for="name">同位体の選択 <span class="required">*</span></label>
|
||
|
|
<select id="name" name="name" required>
|
||
|
|
<option value="" disabled selected>同位体を選んでください</option>
|
||
|
|
<option value="カフ">カフ</option>
|
||
|
|
<option value="セカイ">セカイ</option>
|
||
|
|
<option value="リメ">リメ</option>
|
||
|
|
<option value="ココ">ココ</option>
|
||
|
|
<option value="ハル">ハル</option>
|
||
|
|
</select><br>
|
||
|
|
|
||
|
|
<label for="firstPerson">一人称 <span class="required">*</span></label>
|
||
|
|
<input type="text" id="firstPerson" name="firstPerson" placeholder="" required><br>
|
||
|
|
|
||
|
|
<label for="personality">性格</label>
|
||
|
|
<input type="text" id="personality" name="personality" placeholder=""><br>
|
||
|
|
|
||
|
|
<label for="tone">口調</label>
|
||
|
|
<input type="text" id="tone" name="tone" placeholder=""><br>
|
||
|
|
|
||
|
|
<label for="backgroundStory">バックグラウンドストーリー</label>
|
||
|
|
<textarea id="backgroundStory" name="backgroundStory" placeholder=""></textarea><br>
|
||
|
|
|
||
|
|
<label for="likes">好きなもの</label>
|
||
|
|
<input type="text" id="likes" name="likes" placeholder=""><br>
|
||
|
|
|
||
|
|
<label for="dislikes">嫌いなもの</label>
|
||
|
|
<input type="text" id="dislikes" name="dislikes" placeholder=""><br>
|
||
|
|
|
||
|
|
<button type="submit" class="submit-btn" disabled>登録</button>
|
||
|
|
<p id="error-message" style="color: red; display: none;">必要な項目を正しく入力してください。</p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const botForm = document.getElementById('botForm');
|
||
|
|
const nameSelect = document.getElementById('name');
|
||
|
|
const firstPersonInput = document.getElementById('firstPerson');
|
||
|
|
const submitBtn = botForm.querySelector('.submit-btn');
|
||
|
|
const errorMessage = document.getElementById('error-message');
|
||
|
|
|
||
|
|
// 指定された名前のみ許可
|
||
|
|
const validNames = ['カフ', 'セカイ', 'リメ', 'ココ', 'ハル'];
|
||
|
|
|
||
|
|
function validateForm() {
|
||
|
|
const selectedName = nameSelect.value;
|
||
|
|
const firstPersonValue = firstPersonInput.value.trim();
|
||
|
|
|
||
|
|
// 名前が指定された5つの中にあるかチェックし、一人称が入力されているか
|
||
|
|
if (validNames.includes(selectedName) && firstPersonValue !== '') {
|
||
|
|
submitBtn.disabled = false;
|
||
|
|
errorMessage.style.display = 'none'; // エラーメッセージを非表示
|
||
|
|
} else {
|
||
|
|
submitBtn.disabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 登録ボタンが無効な時のクリックイベント
|
||
|
|
submitBtn.addEventListener('click', function(event) {
|
||
|
|
if (submitBtn.disabled) {
|
||
|
|
event.preventDefault();
|
||
|
|
errorMessage.style.display = 'block'; // エラーメッセージを表示
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 各入力フィールドでのイベントリスナー
|
||
|
|
nameSelect.addEventListener('change', validateForm);
|
||
|
|
firstPersonInput.addEventListener('input', validateForm);
|
||
|
|
});
|
||
|
|
</script>
|