# 入力画面でエラーが出た際にエラーメッセージをラベルと入力フィールドの間に出るやり方

**URL:** <https://community.cybozu.dev/t/topic/10201>\
**Category:** kintone 開発相談\
**Created:** [2025 年 3 月 13 日午前 5:23 UTC](https://community.cybozu.dev/t/topic/10201 "2025-03-13T05:23:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kitano](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kitano](https://community.cybozu.dev/u/kitano)\
**Post date:** [2025 年 3 月 13 日午前 5:23 UTC](https://community.cybozu.dev/t/topic/10201/1 "2025-03-13T05:23:09Z")

</div>

お世話になります。

ウェブアクセシビリティを考える上で、入力画面でエラーが出た際にエラーメッセージをラベルと入力フィールドの間に出るようにしたいのですが、うまくいきません。  
因みに高齢者にも見やすいように黒い枠を入力フィールドに入れております。

以下のコードを入れました。  
JavaScript  
document.addEventListener(‘DOMContentLoaded’, function() {  
const input = document.getElementById(‘name’);  
if (!input) {  
console.error(‘入力フィールドが見つかりません’);  
return;  
}

const formItem = input.closest(‘.form-item’);  
if (!formItem) {  
console.error(‘.form-item クラスを持つ親要素が見つかりません’);  
return;  
}

const label = formItem.querySelector(‘label’);  
if (!label) {  
console.error(‘ラベル要素が見つかりません’);  
return;  
}

// エラーメッセージ要素を作成  
const errorMessage = document.createElement(‘div’);  
errorMessage.className = ‘error-message’;  
errorMessage.textContent = ‘必須項目です’;

// エラーメッセージをラベルの後に挿入  
label.parentNode.insertBefore(errorMessage, label.nextSibling);

// バリデーション関数  
function validateInput() {  
if (input.value.trim() === ‘’) {  
formItem.classList.add(‘error’);  
errorMessage.style.display = ‘block’;  
} else {  
formItem.classList.remove(‘error’);  
errorMessage.style.display = ‘none’;  
}  
}

// 初期状態でエラーメッセージを非表示に  
errorMessage.style.display = ‘none’;

// イベントリスナーを追加  
input.addEventListener(‘blur’, validateInput);  
input.addEventListener(‘input’, validateInput);  
});

````javascript

また、CSSも以下のように微調整しました：

```css
.form-item {
  margin-bottom: 20px;
  position: relative;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
}

.error-message {
  color: #0f62fe;
  font-size: 0.9em;
  margin-bottom: 5px;
  display: none;
}

.el-input {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #090909;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 38px;
  background-color: #fff;
}

.form-item.error .el-input {
  border-color: #0f62fe;
  border-width: 1px;
  border-left-width: 4px;
  background: #ECF9FF;
  color: #0f62fe;
}

しかし、あらかじめ設定した黒い枠と入力フィールドがずれてしまいます。

また、以下のようなエラーが出ました。
入力フィールドが見つかりません

どこに間違いがあるのでしょうか。

お忙しいところ恐縮ですが、よろしくお願いいたします。
````

---

<div class="post-metadata">

**Author:** ![mura](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/mura/32/41_2.png) [@mura](https://community.cybozu.dev/u/mura)\
**Post date:** [2025 年 3 月 15 日午前 12:53 UTC](https://community.cybozu.dev/t/topic/10201/2 "2025-03-15T00:53:14Z")

</div>

これはkintoneのカスタマイズということであってます？（もしくはformbridgeとかならすいません

であれば、まず name というIDの要素を見つけられてないということですね。そもそもkintone用のイベントリスナを使う必要があります

> **[イベント処理の記述方法](https://cybozu.dev/ja/kintone/docs/js-api/events/event-handling/)**
>
> イベント処理の記述方法を説明しています。

formbridgeだとしても同様ですかね（くわしくなくてすいません

> **[JavaScriptカスタマイズ | FormBridge](https://form.kintoneapp.com/help/customize/v2)**
>
> FormBridge