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

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2006/12/18 14:58:22
  • 終了:2006/12/25 15:00:03

回答(6件)

id:bankband No.1

bankband回答回数23ベストアンサー獲得回数42006/12/18 15:57:57

ポイント19pt

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<script langurage="javascript">

/*トリム用関数*/

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>

<input id="input01" type="text">

<div id="Message"></div>

<input type="submit" value="送信" onclick="return chkInput()">

</form>

</body>

</html>


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

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

id:nemoto921

ありがとうございます 参考になります

何ヵ所か入力フォームがありまして最終的にチェックしたときに未入力の部分の下に表示されるようになればいいのですが もっとシンプルなものがあるといいですね 

2006/12/18 16:30:08
id:worstman No.2

最低人間回答回数121ベストアンサー獲得回数62006/12/18 16:14:29

ポイント19pt

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

おまけ

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

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

id:nemoto921

なかなかしぼれてきました ありがとうございます データベースに送信する前の未入力チェックなのでそれについて詳しくお願いします

2006/12/18 17:10:10
id:kura_jet No.3

kura_jet回答回数42ベストアンサー獲得回数02006/12/18 16:33:52

ポイント18pt

http://hoge.co.jp/

URLはダミーです。

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

<body>

<form name="frm" action="http://hoge.co.jp/" method="post">

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


<SCRIPT LANGUAGE="javascript"></p> <p><!--</p> <p>function text_check() {</p> <p> if (document.frm.hoge.value=="") {</p> <p> document.getElementById('err_msg').style.display='inline';</p> <p> return false;</p> <p> }</p> <p> else {</p> <p> document.frm.submit();</p> <p> }</p> <p>}</p> <p>//--></p> <p></SCRIPT>


未入力です。



<input type="button" onclick="text_check();" value="送信">

</form>

<body>

id:kura_jet No.4

kura_jet回答回数42ベストアンサー獲得回数02006/12/18 16:39:42

ポイント18pt

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>

<br>

<input type="button" onclick="text_check();" value="送信">

</form>

<body>

</body>

</html>

id:nemoto921

ブラウザを設定してから確認してみます ありがとうございました

2006/12/18 20:57:40
id:ymch No.5

やちまう回答回数36ベストアンサー獲得回数52006/12/18 17:19:58

ポイント18pt

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

id:nemoto921

こんな感じをイメージしてました 文字の色が赤になって表示されれば最終的にOKです その辺はとほほで見ればいいのですね ありがとうございます

2006/12/18 17:50:16
id:ymch No.6

やちまう回答回数36ベストアンサー獲得回数52006/12/19 11:58:37

ポイント18pt

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


入力漏れがあった際にはフォーム要素と親要素の両方に着色し、入力開始のイベントハンドラは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

id:nemoto921

すばらしいです!まさにこれがやりたかったです!今回初めて"はてな"を利用しましたがこんなに使えるとは・・ありがとうございます 

自分で探したら何日かかるか・・恐ろしいです

初心者ですので今後ともよろしくお願いします。

2006/12/19 14:27:27

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません