フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。

解決済

質問者：hayosato
質問日時：2023/06/25 11:51
回答数：1件

入力フォームが空欄の時、フォームの外にカーソルを当てクリックすると、文字列のエラーのメッセージが表示するコードを調べています。
上記のことをすると、コードはきちんと作動していて問題ありません。

javascriptのコードの▼三角記号の部分のコードの意味が分からずにいます。
Checker = (elm)=>{の意味は、checker = function(elm){と同じ意味でしょうか？

回答よろしくお願いいたします。

---HTMLのコード---

<body>
<form action="form1.php" method="post" id="form">

名前（必須）
<input type="text" class="form1" name="name" id="name" value="" />
<div class="alert1">・名前を入力してください。</div>

<button id="submit" class="yohaku">
</button>

</form>
</body>

---javascriptのコード---

<script>
{
const
form = document.getElementById('form'),
inputs = [...form.querySelectorAll('input[type="text"]')],
▼Checker = (elm)=>{
▼const cls = elm.nextElementSibling.classList;
▼const flag = elm.value.trim() == "";
if(flag) cls.add('show'); else cls.remove('show');

return flag;
};

form.addEventListener('change', e=>{
if(inputs.indexOf(e.target) >= 0) Checker(e.target);
});
form.addEventListener('submit', e=>{
if(inputs.map(e => Checker(e)).indexOf(true) >= 0) e.preventDefault();
});
}
</script>

---文字列のエラーの：フォントなどのスタイルCSSのコード---

/* フォーム付近に出現する赤いテキストエラーメッセージ */
/* 出現文字show alert */
.alert1 { font-size: 0.6em; color: crimson; }
.alert1 { visibility: hidden; }/* 文字を非表示 */
.alert1.show { visibility: visible; }/* 文字を非表示 */

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2023/06/25 14:01

こんにちは

＞～の意味は、checker = function(elm){と同じ意味でしょうか？
アロー関数式を利用した記法です。
意味合いとしてはご理解の通りですが、完全に同じではなく、thisの扱いが変わります。
（ご提示の内容の場合は、this値は関係ありませんが）

https://developer.mozilla.org/ja/docs/Web/JavaSc …