HTML/CSSの操作を一度だけ実行するコード

実現したいこと

送信ボタンをクリックするたびに「お名前を入力してください」とのメッセージが何度も表示されてしまいます。
それを改善するはずの見本のサンプルが正しく作動してくれません。
one()メソッドが有効かと思い色々と試しましたが、意図したようにはなりませんでした。
解決方法をよろしくお願いします。
「Web制作の現場で使う jQueryデザイン入門[改訂新版]_サンプルコード_P107」より

HTML5/jQuery
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<title>sample8</title>
6		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
7		<script>
8$(function(){
9	$("form").submit(function(){
10		if($("input[name='name']").val()==""){
11			if($("span").css("font-weight") != "bold"){
12				$("input[name='name']").css("border","1px solid red").after("<span>お名前を入力してください</span>");
13				$("span").css({
14					"color":"red",
15					"font-weight":"bold"
16				});
17			}
18			return false;
19		}
20	});
21});
22		</script>
23	</head>
24	<body>
25		<form action="check.html" method="post">
26			<dl>
27				<dt>お名前<em>(必須)</em></dt>
28				<dd><input type="text" name="name"></dd>
29				<dt>性別</dt>
30				<dd>
31					<input type="radio" name="gender" value="男性" id="gender_man">
32					<label for="gender_man">男性</label>
33					<input type="radio" name="gender" value="女性" id="gender_woman">
34					<label for="gender_woman">女性</label>
35				</dd>
36				<dt>年齢</dt>
37				<dd>
38					<select name="age">
39						<option>選択してください</option>
40						<option value="10代">10代</option>
41						<option value="20代">20代</option>
42						<option value="30代">30代</option>
43						<option value="40代以上">40代以上</option>
44					</select>
45				</dd>
46				<dt>スキル</dt>
47				<dd>
48					<input type="checkbox" name="html" value="HTML" id="html">
49					<label for="html">HTML</label>
50					<input type="checkbox" name="css" value="CSS" id="css">
51					<label for="css">CSS</label>
52					<input type="checkbox" name="javascript" value="JavaScript" id="javascript">
53					<label for="javascript">JavaScript</label>
54					<input type="checkbox" name="php" value="PHP" id="php">
55					<label for="php">PHP</label>
56				</dd>
57				<dt>コメント</dt>
58				<dd>
59					<textarea name="comment"></textarea>
60				</dd>
61			</dl>
62			<input type="submit" value="送信">
63		</form>
64	</body>
65</html>

jQuery
1
2$(function(){
3  $("form").submit(function(){
4    if($("input[name='name']").val()==""){
5      if($("span").css("font-weight") != "bold"){
6        $("input[name='name']")
7          .css("border","1px solid red")
8          .one("after", "<span>お名前を入力してください</span>"); // 失敗例
9        $("span").css({
10          "color":"red",
11          "font-weight":"bold"
12        });
13      }
14      return false;
15    }
16  });
17});

m.ts10806

2023/04/06 06:12

どこでそのメッセージをクリアしていますか？（もしくはそのつもりで書いたのはどの部分ですか？）

taka_oct092018

2023/04/06 07:27

>>m.ts10806様返信ありがとうございます。以下の箇所です。 .one("after", "<span>お名前を入力してください</span>"); // 失敗例

m.ts10806

2023/04/06 07:37

お名前を入力した場合にも出てるということですか？もう少し詳しく記載願います。

行動規範の内容に同意します

回答1件

ベストアンサー

afterは追加していくからでしょうね
input要素の後ろがspanだったら的な条件をいれていみては？

javascript
1$(function(){
2  $("form").submit(function(){
3    if($("input[name='name']").val()==""){
4      if($("input[name='name']").next('span').length==0){
5        $("input[name='name']")
6          .css("border","1px solid red")
7          .after($("<span>お名前を入力してください</span>")
8          .css({"color":"red","font-weight":"bold"}));
9      }
10      return false;
11    }
12  });
13});