人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: nemoto921
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript アラート サイト ソース
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● bankband
●19ポイント

<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

◎質問者からの返答

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

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


2 ● 最低人間
●19ポイント

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

おまけ

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

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

◎質問者からの返答

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


3 ● kura_jet
●18ポイント

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>


4 ● kura_jet
●18ポイント

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>

◎質問者からの返答

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


5 ● やちまう
●18ポイント

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

◎質問者からの返答

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ