おしえて

JavaScriptの空欄に埋めるものが何かが分かりません。

締切済

質問者：さくりか
質問日時：2022/03/10 21:06
回答数：1件

下記のJavaScriptの問題なのですが、①～⑤までを埋めたいのですが分かりません。
このコードは、「名前」・「問い合わせ内容」・「パスワード」が空欄のままフォーカスや送信が押された場合に文字枠を赤枠で表示させるというものです。

①必須項目にしたクラス
②フォーカスが外れた際に発動するイベント
③クラス解除
④クラス付与
⑤赤枠にするのでcssで定義

※下記記載のコードたちはいじらないで作成できればありがたいです。
JavaScriptはそのままで、HTMLやCSSが修正したほうが容易であれば、修正も可能です。

～HTML～
<form>
<div class="form-item">
<p>名前：</p>
<input class="entry-field" type="text" name="name" placeholder="名前を入力してください" required>
</div>
<div class="form-item">
<p>問い合わせ内容：</p>
<textarea class="entry-field" rows="5" name="inquiry" required></textarea>
</div>
<div class="form-item">
<p>パスワード：</p>
<input class="entry-field" type="password" name="pass" placeholder="Enteer password." required>
</div>
<p></p>
<button class="btn-flat-border" type="submit">送信</button>
<button class="btn-flat-border" type="reset">リセット</button>
</form>

～CSS~
[data-invalid]:invalid{border:solid 1px red;}

～JavaScript～
$(function (){
$("①").on("②", function() {
if ($(this).val()) {
$(this).③("⑤");
} else {
$(this).④("⑤");
}
});
});

通報する

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

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2022/03/10 23:36

こんばんは

＞HTMLやCSSが修正したほうが容易であれば、修正も可能です。
data属性を使うよりも、単に、クラスの付与/削除にするほうが簡単かはと思いますけれど。
というか、required 属性と機能がダブっているような気がしますけれど・・

何かのライブラリを使ってるっぽいですけれど、何なのかの記載がないので、以下は素のスクリプトで・・

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
[data-invalid]:invalid{border:solid 1px red;}
</style>
</head>
<body>
<form>
<div class="form-item">
<p>名前：</p>
<input class="entry-field" type="text" name="name" placeholder="名前を入力してください" required />
</div>
<div class="form-item">
<p>問い合わせ内容：</p>
<textarea class="entry-field" rows="5" name="inquiry" required></textarea>
</div>
<div class="form-item">
<p>パスワード：</p>
<input class="entry-field" type="password" name="pass" placeholder="Enteer password." required />
</div>
<p></p>
<button class="btn-flat-border" type="submit">送信</button>
<button class="btn-flat-border" type="reset">リセット</button>
</form>

<script>
document.querySelectorAll('.entry-field').forEach(e=>{
e.addEventListener('blur', function(){
this.dataset.invalid = this.value?"":"invalid";
});
});
</script>
</body>
</html>