JavaScriptの問題です。入力欄が未記入だったらアラートが出るという処理なんですが、付け加えて対象のテキストボックスの枠を赤くしたいのですが、どう記述したらよいでしょうか。function submitForm(){// 入力チェックif(document.myForm.name.value == \u0026quot;\u0026quot; || document.myForm.email.value == \u0026quot;\u0026quot; || document.myForm.gender.value == \u0026quot;\u0026quot;){alert(\u0026quot;必須項目を入力してください\u0026quot;);return false;}var result = window.confirm(\u0026quot;入力内容で送信します。よろしいですか？\u0026quot;);if (result) {alert(\u0026quot;注文が確定しました\u0026quot;);return true; // フォームを送信} else {alert(\u0026quot;キャンセルしました\u0026quot;);return false; // フォーム送信をキャンセル}}

前回質問の続きですね。

質問者さん、質問が小出しになっているので内容はまとめて質問したほうが回答しやすくなります。

同じ指摘になりますが回答者はぜんぶ質問を読んでいるわけではないので次回からは過去質問URLを貼りましょう。

yahoo.co.jp/qa/question_detail/q14321700469">https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14321700469



#1

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12321690782



作成してみました。未記入ならアラート、赤くするです。

HTMLとJavaScriptの修正が一気に増えるので一つずつ確認することをおすすめします。

http://er8.s323.xrea.com/orderform003/orderform003.html





サンプルなので送信ボタンを押してもどこにも情報は送信されません。





HTML側の変更



項目にタイトルを付ける

\u0026lt;label\u0026gt;お名前\u0026lt;/label\u0026gt;など追加される度に記述が必要です。





JavaScript側の変更



1. 各入力欄を個別にチェック

現在は || で一括チェックしていますが、どの欄が空なのか判定できないので、個別にチェックする必要があります。



2. 赤枠の付け方

JavaScriptで要素の style.border プロパティを変更します:

JavaScriptdocument.myForm.name.style.border = \u0026quot;2px solid red\u0026quot;;





コードの処理フロー



1. 枠色をリセット



ユーザーが修正して再送信するとき、すべてリセットしてから再チェックする必要があるため



2. エラーフラグの初期化



後で「1つでもエラーがあったか」を判定するため



3. 各入力欄を個別にチェック



document.myForm.name.value で入力値を取得

空文字列(\u0026quot;\u0026quot;)と比較

空欄なら:

その入力欄に赤枠を設定(2px solid red)

エラーフラグを true に変更

これをname、email、genderの3つに対して実行



4. エラーがあれば処理を中断



アラートを表示

return false でフォーム送信を中止



5. 確認ダイアログ(エラーがない場合のみ実行)