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

【JavaScript】
フォームのテキストエリアに数字を入力したとき、特定の数より小さい場合にエラー表示を出すにはどうすればよいでしょうか?併せて半角数字のみ受付るようにしたいのですが。具体的なソースを教えていただけると助かります。

例えば100未満を入力して送信ボタンを押した場合は「100以上に設定してください」とエラー表示が出るという具合です。半角数字でない場合は「半角数字で入力を」とエラーが出るという具合です。

●質問者: tsuntsuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript エラー エリア ソース テキスト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● KUROX
●18ポイント

http://game.gr.jp/about/chkinput/onblur_text_isNaN.htm

100も、oj.valueの値をチェックするだけです。

動作させてないので、適当なソースですが

こんな感じに書き換えます。

function chktext_isNaN(oj) {

if (isNaN(oj.value)) {

oksubmit = false ;

alert("この項目半角数字を入力してください");

oj.focus()

} else {

if(oj.value<100){

alert("100以上に設定してください");

oj.focus()

}else{

oksubmit = true ;

}

}

}

◎質問者からの返答

ちょっと動作に難が・・・

私、JavaScriptほとんど分からなくて。


2 ● GEN111
●120ポイント

質問文にテキストエリアとありますが textarea ではなく input の text だと解釈しました。

元のフォームにもよりますが、次のような感じでどうでしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <style type="text/css">
 </style>

 <script type="text/javascript">
 function checknum() {
 var v = document.myform.num.value ;

 // 数値ではない (全角文字の場合も含む) 場合
 if (isNaN(v)) {
 alert('半角数字で入力してください。') ;
 return false ;
 }

 // 100 未満の場合
 if (v < 100) {
 alert('100以上の数値を入力してください。') ;
 return false ;
 }
 }
 </script>
 </head>

 <body>
 <form name="myform" onsubmit="return checknum()">
 <input type="text" name="num" value="" />
 <input type="submit" />
 </form>
 </body>
</html>
◎質問者からの返答

GEN111さん、いつも本当にありがとうございます。助かりました、ばっちりでした!


欲が出てきてしまいました・・・

このソースに付け加える形で、値が正常な場合、「送信してもいいですか?」というメッセージを出して「OK」を押すと送信されるというふうにすることは可能でしょうか?


3 ● GEN111
●120ポイント ベストアンサー

こんな感じでどうでしょうか。

function checknum() {
 var v = document.myform.num.value ;

 // 数値ではない (全角文字の場合も含む) 場合
 if (isNaN(v)) {
 alert('半角数字で入力を入力してください。') ;
 return false ;
 }

 // 100 未満の場合
 if (v < 100) {
 alert('100以上の数値を入力してください。') ;
 return false ;
 }

 // ↓付け加える
 // 正常な値の場合
 return confirm('送信しても良いですか?') ;
}
◎質問者からの返答

ありがとうございます!今日はもう確認できないので、明日、試させていただきます!


試してみました。ばっちりでした!ありがとうございます。

また質問することがあると思いますが、その際はどうぞよろしくお願い致します。

関連質問


●質問をもっと探す●



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