JavaScriptの質問です。ある文字列をフォームに入力したとき、別ファイルに用意してある文字列一覧の中に、その入力した文字列がない場合に警告を表示したいです。

可能であれば、文字列が一致しなければサブミットボタンを押せないようにできるとうれしいです。
このようなサンプルスクリプトをご紹介いただけませんでしょうか?
どうぞよろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/06/15 11:04:03
  • 終了:2012/06/17 06:59:47

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/06/15 13:31:26

ポイント180pt

$.getを使うのでローカルであってもサーバを立てる必要があります。
文字列ファイルもutf-8で保存すること。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	loadList();
});
var wordList = [];
function loadList() {
	$.get("word_list.txt", function(data){
		wordList = $.trim(data).split(/\r?\n|\r/);
		wordCheck();
	});
}
function wordCheck() {
	$('#input_area').keyup(function(e) {
		var inputValue = this.value;
		var isContain = $.inArray(inputValue, wordList);
		var output = $('#output');
		var submitBtn = $('#submit_btn');
		if (isContain != -1) {
			//output.text('match');
			output.text('');
			submitBtn.removeAttr('disabled');
		} else {
			output.text('not match');
			submitBtn.attr('disabled', true);
		}
	});
}
</script>
</head>
<body>
<input id="input_area" type="text">
<input id="submit_btn" type="submit" disabled>
<div id="output"></div>
</body>
</html>

word_list.txt

abc
book
fish
はてな
id:kanienoteiou

すばらしいです!
完璧です!
早速実装してみましたところまさに思っていた動作が実現できました。
本当にありがとうございました。

2012/06/17 06:59:14

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4507ベストアンサー獲得回数18702012/06/15 13:21:39

ポイント120pt

こんな感じでしょうか。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$(function() {

    var url_def = "def.txt";        // 文字列を定義する別ファイルの URL

    $.get(url_def, function(data) {
        var keyword_list = data.split(/[\r\n]+/);
        $("form").submit(
            function() {
                var v = $("#target").val();
                for (var i = 0 ; i < keyword_list.length ; ++i) {
                    if (v == keyword_list[i]) {
                        return true;
                    }
                }
                alert("あかんで. '" + v + "'");
                return false;
        });
    });

});
</script>
<form>
<input type="text" size="80" id="target">
<input type="submit" value="submit !">
</form>

別ファイルは、Ajax で読み込んでて、HTML と同じ階層にある def.txt から読みこんでます。
こんな感じで、文字列を改行でズラズラと。

入力
フォーム
必要
javascript

jQuery 使ってます。
ページを読みこんだときに、別ファイルを読み込んで、行ごとにチェック用の配列に抱えておきます。
サブミットを押した後に、文字列が別ファイルにあるかどうかを確認して、無かったら「だめよ」と表示します。
もし、別ファイルにある文字列だったら、そのままフォームのサブミットの処理を続けます。

id:kanienoteiou

完璧なソースをいただきましてありがとうございました!
サブミットボタンをディスエイブルにする処理のあるほうを採用させていただきましたが、ご教授いただいた手法も他のサイトで使用できそうです。
ありがとうございました!

2012/06/17 06:58:17
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/06/15 13:31:26ここでベストアンサー

ポイント180pt

$.getを使うのでローカルであってもサーバを立てる必要があります。
文字列ファイルもutf-8で保存すること。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	loadList();
});
var wordList = [];
function loadList() {
	$.get("word_list.txt", function(data){
		wordList = $.trim(data).split(/\r?\n|\r/);
		wordCheck();
	});
}
function wordCheck() {
	$('#input_area').keyup(function(e) {
		var inputValue = this.value;
		var isContain = $.inArray(inputValue, wordList);
		var output = $('#output');
		var submitBtn = $('#submit_btn');
		if (isContain != -1) {
			//output.text('match');
			output.text('');
			submitBtn.removeAttr('disabled');
		} else {
			output.text('not match');
			submitBtn.attr('disabled', true);
		}
	});
}
</script>
</head>
<body>
<input id="input_area" type="text">
<input id="submit_btn" type="submit" disabled>
<div id="output"></div>
</body>
</html>

word_list.txt

abc
book
fish
はてな
id:kanienoteiou

すばらしいです!
完璧です!
早速実装してみましたところまさに思っていた動作が実現できました。
本当にありがとうございました。

2012/06/17 06:59:14

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

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

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

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

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