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

JavaScriptの質問です。ある文字列をフォームに入力したとき、別ファイルに用意してある文字列一覧の中に、その入力した文字列がない場合に警告を表示したいです。
可能であれば、文字列が一致しなければサブミットボタンを押せないようにできるとうれしいです。
このようなサンプルスクリプトをご紹介いただけませんでしょうか?
どうぞよろしくお願いします。

●質問者: kanienoteiou
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●120ポイント

こんな感じでしょうか。

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


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

2 ● Cherenkov
●180ポイント ベストアンサー

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

kanienoteiouさんのコメント
すばらしいです! 完璧です! 早速実装してみましたところまさに思っていた動作が実現できました。 本当にありがとうございました。
関連質問

●質問をもっと探す●



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