HTML,javascriptなどで作った必須項目の入力フォームに何も入力しないで送信したときにアラートを表示せずにその入力フォームの下くらいに「未入力です」などの表示をさせたいのですがその記述の方法などわかるソース・サイトなど教えていただきたいです

Question

nemoto921

11

10もっと見る

110pt

ウェブ制作

HTML,javascriptなどで作った必須項目の入力フォームに何も入力しないで送信したときにアラートを表示せずにその入力フォームの下くらいに「未入力です」などの表示をさせたいのですがその記述の方法などわかるソース・サイトなど教えていただきたいです

回答の条件

URL必須
1人3回まで

登録：2006/12/18 14:58:22
終了：2006/12/25 15:00:03

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

人力検索はてな HTML,javascriptなどで作った必須項目の入.. 2006-12-18 16:12:26

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

bankband · Answer 1 · 2006-12-18T15:57:57+09:00

<html>

<head>

/*トリム用関数*/

function Trim(strTemp)

{

//LTRIM

var strRet = LTrim(strTemp);

//RTRIM

var strFinal = RTrim(strRet);

return strFinal

}

function RTrim(strTemp)

{

var nLoop = 0;

var strReturn = strTemp;

while (nLoop < strTemp.length)

{

if ((strReturn.substring(strReturn.length - 1, strReturn.length) == " ") || (strReturn.substring(strReturn.length - 1, strReturn.length) == "　"))

{

strReturn = strTemp.substring(0, strTemp.length - (nLoop + 1));

}

else

{

break;

}

nLoop++;

}

return strReturn;

}

function LTrim(strTemp)

{

var nLoop = 0;

var strReturn = strTemp;

while (nLoop < strTemp.length)

{

if ((strReturn.substring(0, 1) == " ") || (strReturn.substring(0, 1) == "　"))

{

strReturn = strTemp.substring(nLoop + 1, strTemp.length);

}

else

{

break;

}

nLoop++;

}

return strReturn;

}

/*チェック用関数*/

function chkInput(){

//テキストボックスをDOMとして取得

var objInput = document.getElementById("input01");

//テキストボックスの値を取得

var strInput = objInput.value;

//テキストボックスの値をトリム

strInput = Trim(strInput)

if(strInput==""){

//未入力と表示するDIVをDOMとして取得

var objMessage = document.getElementById("Message");

objMessage.innerText = "未入力です";

//submitさせない

return false

}

else

{

//submitさせる

return true

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

■上記の内容でどうでしょうか?

http://q.hatena.ne.jp/1166421500

最低人間 · Answer 2 · 2006-12-18T16:14:29+09:00

http://blog.masuidrive.jp/articles/2006/01/05/validation

リアルタイムに入力をチェックするライブラリです。

http://www.futomi.com/books/ajax/source/04/post2.html

こちらはそのものずばり送信時のチェックですね

サンプルコードは　http://www.futomi.com/books/ajax/#down　に含まれています。

http://phpspot.org/blog/archives/2006/10/javascripttoolt.html

おまけ

こちらで紹介されている方法は送信前にツールチップを出す方法です。

ユーザーを誘導する方法というのは実にいろんなものがあるものですね。

kura_jet · Answer 3 · 2006-12-18T16:33:52+09:00

http://hoge.co.jp/

URLはダミーです。

こんなんでどうでしょう？

<body>

必須項目<input type="text" name="hoge">

<SCRIPT LANGUAGE="javascript"></p> <p></p> <p></SCRIPT>

未入力です。

</form>

<body>

kura_jet · Answer 4 · 2006-12-18T16:39:42+09:00

http://hoge.co.jp/

URLはダミーです。

先ほど回答に失敗しましたので、再度回答します。（タグが回答の邪魔をするので全角にしてみました。）

このようなのでどうでしょう？

＜html＞

＜head＞＜title＞test＜/title＞＜/head＞

＜body＞

＜form name="frm" action="http://hoge.co.jp/" method="post"＞

必須項目＜input type="text" name="hoge"＞

＜br＞

＜script language="javascript"＞

＜!--

function text_check() {

if (document.frm.hoge.value=="") {

document.getelementbyid('err_msg').style.display='inline';

return false;

}

else {

document.frm.submit();

}

//--＞

＜/script＞

＜br＞

＜span id="err_msg" style="display: none;"＞未入力です。＜/span＞

＜br＞

＜input type="button" onclick="text_check();" value="送信"＞

＜/form＞

＜body＞

＜/body＞

＜/html＞

やちまう · Answer 5 · 2006-12-18T17:19:58+09:00

worstmanさんが既に模範解答されてますので、蛇足になると思いますが…。

以下は私がよく利用する子供騙しな仕掛けです…(^_^;)

ただ単に「未入力です」と表示させるだけでなく、テーブルを親要素としてそれに着色することで

入力を促すようにしています。また、入力が開始された時点でメッセージは消えて着色も解除されます。

<!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=Shift_JIS">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>FORMの未入力チェック</title>
    <script type="text/javascript"><!--
    //Submit時の入力チェック
    function preCheck() {
        //オブジェクト定義
        var inputwords = window.document.getElementById("inputwords");
        var notice = window.document.getElementById("notice");
        //入力が空値のとき
        if ((inputwords.value == "") || (inputwords.value == undefined)) {
            inputwords.parentNode.style.backgroundColor = "#aec";   //親要素を着色
            notice.innerHTML = "未入力です";    //エラーメッセージを表示
            inputwords.focus();
            inputwords.select();
            return(false);  //Submitさせない
        }
        //入力されているとき
        else {
            return(true);   //Submitする
        }
    }
    //親要素の背景を元に戻し、エラーメッセージを消す。
    function resetBackground(elem) {
        elem.parentNode.style.backgroundColor = "";
        elem.nextSibling.nextSibling.innerHTML = "";
    }
    // --></script>
</head>
<body>
<form action="hoge.cgi" method="post" onsubmit="return preCheck();">
<table border="1" cellpadding="5">
    <caption>FORMの未入力チェック</caption>
    <tr>
        <td>入力欄</td>
        <td>
            <input type="text" name="inputwords" id="inputwords" onkeyup="resetBackground(this);">
            <span id="notice"></span>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="right">
        <input type="submit" value="送信">
        </td>
    </tr>
</table>
</form>
</body>
</html>

http://www.futomi.com/books/ajax/source/04/post2.htmlでの例のように、

要素そのものに着色した方がスマートかもしれませんが…

ちなみに、フォームの要素が複数ある場合は配列で処理すればうまくいくと思います。

配列については…

http://www.tohoho-web.com/js/array.htm

やちまう · Answer 6 · 2006-12-19T11:58:37+09:00

これでほぼお望みの動作になっていることと思います。

入力漏れがあった際にはフォーム要素と親要素の両方に着色し、入力開始のイベントハンドラはEnterキー対策の為にonkeyupからonkeypressに変更しています。エラーメッセージ色は赤です。

また、複数要素に対応させる為に配列を用いています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>FORMの未入力チェック</title>
    <script type="text/javascript"><!--
    //Submit時の入力チェック
    function preCheck() {
        //オブジェクト配列定義
        var required = new Array(3);    //必須入力要素の数
        var notice = new Array(3);      //必須入力要素とペアになるエラーメッセージの要素数
        //それぞれの必須入力項目に対して…
        for (i=1; i<=required.length; i++) { //配列の添字は本来は0からだが、紛らわしいので…
            required[i] = window.document.getElementById("required" + i);
            notice[i] = window.document.getElementById("notice" + i);
            //入力が空値のとき
            if ((required[i].value == "") || (required[i].value == undefined)) {
                required[i].style.backgroundColor = "#ffd"; //要素を着色
                required[i].parentNode.style.backgroundColor = "#aec";  //親要素も着色
                notice[i].innerHTML = "必須入力です";   //エラーメッセージを表示
                required[i].focus();
                required[i].select();   //（これは不要かも…）
                return(false);  //Submitさせない
            }
            //入力されているとき
            else {
                //それが最後の要素だったら…
                if(i==required.length) {
                    return(true);   //Submitする
                }
            }
        }
    }
    //要素および親要素の色を元に戻し、エラーメッセージを消す。
    function resetBackground(elem) {
        elem.style.backgroundColor = "";
        elem.parentNode.style.backgroundColor = "";
        elem.nextSibling.nextSibling.innerHTML = "";
    }
    // --></script>
</head>
<body>
<form action="hoge.cgi" method="post" onsubmit="return preCheck();">
<table border="1" cellpadding="5" summary="入力フォーム">
    <caption>FORMの未入力チェック</caption>
    <tr>
        <td>入力欄1（必須）</td>
        <td>
            <input type="text" name="required1" id="required1" value=""
                onclick="void(0);" onkeypress="resetBackground(this);">
            <span id="notice1" style="color:#f00; font-weight:bold;"></span>
        </td>
    </tr>
    <tr>
        <td>入力欄2</td>
        <td>
            <input type="text" value="" name="notrequired" id="notrequired">
        </td>
    </tr>
    <tr>
        <td>入力欄3（必須）</td>
        <td>
            <input type="text" name="required2" id="required2" value=""
                onclick="void(0);" onkeypress="resetBackground(this);">
            <span id="notice2" style="color:#f00; font-weight:bold;"></span>
        </td>
    </tr>
    <tr>
        <td>入力欄4（必須）</td>
        <td>
            <input type="text" name="required3" id="required3" value=""
                onclick="void(0);" onkeypress="resetBackground(this);">
            <span id="notice3" style="color:#f00; font-weight:bold;"></span>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="right">
        <input type="submit" value="送信">
        </td>
    </tr>
</table>
</form>
</body>
</html>

こんな感じですが…使い物になりそうでしょうか？

P.S.

URLがダミーでは、あんまりな感じがしますので…

今回の件と全く関係ありませんが、なかなか面白いです。

↓

http://zyco.abz.jp/hot/index.shtml

回答（6件）

bankband2342006/12/18 15:57:57

最低人間12162006/12/18 16:14:29

kura_jet4202006/12/18 16:33:52

kura_jet4202006/12/18 16:39:42

やちまう3652006/12/18 17:19:58

やちまう3652006/12/19 11:58:37

コメント（0件)

この質問への反応（ブックマークコメント）

トラックバック