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

Question

kanienoteiou

39

39もっと見る

300pt

インターネットウェブ制作

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

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

回答の条件

1人5回まで

登録：2012/06/15 11:04:03
終了：2012/06/17 06:59:47

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

No.1

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

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

2012/06/17 06:58:17

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

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

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

リクエスト送信済

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

Cherenkov · Accepted Answer · 2012-06-15T13:31:26+09:00

$.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
はてな

Cherenkov · Accepted Answer · 2012-06-15T13:31:26+09:00

$.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
はてな

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

ベストアンサー

Cherenkov15044932012/06/15 13:31:26

その他の回答（1件）

a-kuma3497321542012/06/15 13:21:39

Cherenkov15044932012/06/15 13:31:26ここでベストアンサー

コメント（0件)

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