フォームの簡易的な動的チェック

http://hiropon.sub.jp/ajax/0208-3.html

数値かどうかを簡単にチェックする(厳密にはチェックできるようにはなっていないです)。無いよりはあったほうがいい 程度の方法。

  • 入力された値が数値であればvalidのサインを出し、数値以外であればbadのサインを出す。
  • validが出ないとsubmitボタンを押せない
  • フォームのsubmitボタンを押す前に誤入力をチェックするのが2.0的でカッコよす。
  • 非同期通信を利用すれば用途がもっとひろがりんぐ。

チェックの条件式を工夫すれば、各種フォームに応用できますよね。

  • 入力された値が適当なものかどうかサインを出す場合、チェックの条件がしっかりしてないといけない。テキトーなチェック式だと、ブラウザではvalidが出たのにサーバーはエラーを返す というむしろ不親切な事態にもなりえるなぁ。


function showImg(file){ //画像を変換する関数
document.getElementById("valid_img").src ="./img/" + file + ".gif";
}

function btnLock(status){
document.getElementById("btn").disabled = status;
}

function checkValue(){
var input = document.getElementById("input_text");

var tmp = input.value;

if(tmp.length == 0){ // 何も入力されていないとき
showImg("none");
btnLock("true");
input.style.backgroundColor ="#eeeeee";
}else{
tmp = parseInt(tmp , 10); //数値に変換
if(! isNaN(tmp)){ //数値であるとき
showImg("valid");
btnLock("false");
input.style.backgroundColor ="#ffffff";
}else{
showImg("invalid");  //数値以外の時
btnLock("true");
input.style.backgroundColor ="#FF6666";
}
}
}