上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




JavaScriptのValidate.jsを使って簡単な入力チェックフォームを作成してみます。
入力フォーム中のテキストからフォーカスが外れた際、入力チェックを行いエラーメッセージを出力する簡単なサンプルを作成してみます。



JavaScriptのValidate.js


JavaScriptの入力チェックライブラリ「Validate.js」には、色々な入力チェック関数が用意されています。
例えば、必須チェックや数字のみ、日付形式などがあります。
■必須チェックの場合
var f = new Validate();
if(!f.isNotEmpty(document.validateForm.nom.value)){
alert("Empty");
}else{
alert("Not empty");
}

こんな感じです。
詳細は、下記サイトをご覧ください。
Mutationevent :: Validate.js :: javascript package to validate various data


JavaScriptのValidate.jsを使ったサンプル


テキストボックスからフォーカスを外すとテキストボックスの下にエラーメッセージを表示しています。
入力内容がOKならメッセージは表示しません。
名前(必須)
メールアドレス(必須+形式)

とっても簡単なサンプルですが、
ユーザーにとってもテキストボックスに入力し次の項目に移ったらエラーになる場合と、
全て入力し終わった後のボタン押下でエラーになる場合なら、全者の方が使いやすいのかなと。
後は・・・エラーメッセージの色を変えたり、OK画像やNG画像など付ければ使える気が・・・。

JavaScriptのValidate.jsを使ったサンプルソース


まずはJavaScriptの部分です。

<script type="text/javascript" src="validatejs.js"></script>
<script type="text/javascript">
var validate = new Validate();
var errflg;

//名前
function chkUserName(obj) {
errflg = "true";
var errmsg = "入力に誤りがあります。";
//必須
if (!validate.isNotEmpty(obj.value)) {
errflg = false;
errmsg = errmsg + "(必須)";
}
if (errflg == false) {
document.getElementById("errormsg_username").innerHTML = errmsg;
document.getElementById("error_username").style.display = "block";
} else {
document.getElementById("error_username").style.display = "none";
}
return errflg;
}

//メールアドレス
function chkUserMail(obj) {
errflg = "true";
var errmsg = "入力に誤りがあります。";
//必須,メール形式チェック
if (!validate.isNotEmpty(obj.value)) {
errflg = false;
errmsg = errmsg + "(必須)";
} else {
if (!validate.isEMailAddr(obj.value)) {
errflg = false;
errmsg = errmsg + "(メール形式)";
}
}
if (errflg == false) {
document.getElementById("errormsg_usermail").innerHTML = errmsg;
document.getElementById("error_usermail").style.display = "block";
} else {
document.getElementById("error_usermail").style.display = "none";
}
return errflg;
}


次にHTMLの部分です。
<form name="valForm">
<table>
<tr>
<td>名前</td>
<td><input type="text" name="username" id="username" onblur="chkUserName(this)">(必須)
<div id="error_username">
<span id="errormsg_username" style="vertical-align: middle"></span>
</div>
</td>
</tr>
<tr>
<td>メールアドレス</td>
<td><input type="text" name="usermail" id="usermail" onblur="chkUserMail(this)">(必須+形式)
<div id="error_usermail">
<span id="errormsg_usermail" style="vertical-align: middle"></span>
</div>
</td>
</tr>
</table>
</form>

テキストボックスのonblurイベントでJavaScriptのチェック関数を呼び出し、入力エラーがあればdivを表示、正常であれば非表示にしているだけです。
エラー画像など埋め込む場合は、divタグの中に入れればOK。

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。