質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Q&A

解決済

1回答

10763閲覧

jspでエラー部分のテキストボックスを色づけするには

yk-211

総合スコア34

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

0グッド

0クリップ

投稿2015/06/29 13:17

こんばんは。
調べても分かりませんでしたので、質問をさせてください。

jspでこのようなソースを書いています。
入力のチェックをjavaの方で行っており、エラーメッセージが出た場合には、
該当のテキストボックスに色をつけたいのですが、jspのみでそのような方法は
ありますでしょうか。
よろしくお願いいたします。

<%@ page language="java" contentType="text/html; charset=EUC_JP" pageEncoding="Windows-31J"%> <%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld"%> <%@ taglib prefix="fn" uri="/WEB-INF/tld/fn.tld"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC_JP"> <c:import url="./head.jsp" /> <link rel="stylesheet" type="text/css" href="../css/customerDetail.css"> <link rel="stylesheet" type="text/css" href="../css/error.css"> <script type="text/javascript" src="../js/dialog.js" charset="UTF-8"> </script> <title>編集画面</title> <script type="text/javascript"> function touroku() { // 「OK」時の処理 + 確認ダイアログの表示 if (window.confirm('本当に登録してよろしいですか?')) { location.href = "/Kadai/page/customerDetail.jsp"; return true; } //キャンセルしたら元の画面に戻る return false; } function kousin() { var msg; if (document.form1.deleteFlag.checked) { msg = "削除"; } else { msg = "更新"; } // 「OK」時の処理 + 確認ダイアログの表示 if (window.confirm('本当に' + msg + 'してよろしいですか?')) { location.href = "/Kadai/page/customerList.jsp"; return true; } //キャンセルしたら元の画面に戻る return false; } </script> </head> <body> <form action="./CustomerDetail" method="post" name="form1"> <table> <tr> <th>顧客ID</th> <td><c:choose> <c:when test="${processType == 'insert'}"> <input type="text" name="id" size="12" value="${id}"> </c:when> <c:otherwise> <c:out value="${id}" /> <input type="hidden" name="id" value="${id}"> </c:otherwise> </c:choose></td> </tr> <tr> <th>顧客漢字名</th> <td><input type="text" name="name" size="20" value="${name}"></td> </tr> <tr> <th>顧客カナ名</th> <td><input type="text" name="kana" size="20" value="${kana}"></td> </tr> <tr> <th>性別</th> <td><select name="gender"> <c:forEach var="generalDto" items="${genderList}" varStatus="status"> <c:choose> <c:when test="${generalDto.detailCode == gender}"> <option value="${generalDto.detailCode}" selected><c:out value="${generalDto.contents1}" /></option> </c:when> <c:otherwise> <option value="${generalDto.detailCode}"><c:out value="${generalDto.contents1}" /></option> </c:otherwise> </c:choose> </c:forEach> </select></td> </tr> <tr> <th>身長</th> <td><input type="text" name="height" size="12" value="${height}">cm</td> </tr> <tr> <th>体重</th> <td><input type="text" name="weight" size="12" value="${weight}">kg</td> </tr> <tr> <th>生年月日</th> <td><input type="text" name="birthday" size="12" value="${birthday}">(yyyy/MM/ddで入力してください)</td> </tr> <tr> <th>郵便番号</th> <td><input type="text" name="zipCode" size="14" value="${zipCode}">(ハイフン無しで入力してください)</td> </tr> <tr> <th>住所</th> <td><input type="text" name="address" size="40" value="${address}"></td> </tr> <tr> <th>電話番号</th> <td><input type="text" name="phone" size="14" value="${phone}">(ハイフンありで入力してください)</td> </tr> <c:choose> <c:when test="${processType == 'insert'}"> </c:when> <c:otherwise> <tr> <th>削除</th> <td><input type="checkbox" name="deleteFlag" size="12" value="${1}"></td> </tr> </c:otherwise> </c:choose> </table> <c:choose> <c:when test="${processType == 'insert'}"> <input type="text" name="processType" value="insert" style="display: none"> <input type="submit" value="OK" onClick="return touroku()" /> </c:when> <c:otherwise> <input type="text" name="processType" value="update" style="display: none"> <input type="submit" value="OK" onClick="return kousin()" /> </c:otherwise> </c:choose> &nbsp; <input type="submit" value="一覧へ" name="backList" /> </form> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

zipCodeを例にすると、エラーの場合はclass属性にエラーのスタイルを適用するようにします。

c:setの箇所は、実際にはエラー判定の結果に従って設定します。
styleタグは、実際にはCSSなどに書いてください。

<style> .inputError { background-color: red; } </style> <c:set var="zipCodeClass" value="inputError" /> <input type="text" name="name1" class="${zipCodeClass}" >

投稿2015/06/29 13:42

編集2015/06/29 13:44
argius

総合スコア9388

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk-211

2015/06/29 13:54

回答ありがとうございます。 では例のように全ての項目に関して、cssに追加します。 エラー判定の結果に従って設定とは、どういったことでしょうか? 申し訳ありません。
argius

2015/06/29 14:11

上記例では、常にc:setでinputErrorを設定してしまっていますので、実際にはサーブレット(CustomerDetailだと思います)側でのエラー判定の結果に従って、エラーの場合にだけzipCodeClassにinputErrorを設定するようにしてみてください。 request.setAttribute("zipCodeClass", "inputError");のようなコードをエラーの場合に実行すれば良いと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問