アルファベットのみのバリデーション
数値のみのバリデーションの次は，
アルファベットのみの入力かどうかのチェック
jQuery(function($){
$('#alphabet').bind('keyup blur',function(){
var self = $(this);
var txt = self.val();
var txtLength = txt.length;
if(txt && txtLength>0){
if(txt.match(/^[a-zA-Z]*$/)){
self.next().remove().end().after('<span class="ok">valid</span>');
}else{
self.next().remove().end().after('<span class="err">半角英字で入力してください</span>');
}
}else{
$(this).next().remove();
}
});
});
入力が半角のアルファベッドではなければ，
半角英字のみの入力かどうか
txt.match(/^[a-zA-Z]*$/)
^[a-zA-Z]*$
| パターン(赤文字部分) | 説明 |
|---|---|
| ^ | ～で始まる |
| [a-zA-Z]* | 半角英字 |
| $ | ～で終わる |
数字の入力を許可せずにアルファベットのみの入力にする機会がそれほど多くはないかもしれないですが，
URLのバリデーション
さて，
正しいURLの入力かどうかのチェック
jQuery(function($){
$('#url').bind('keyup blur',function(){
var self = $(this);
var txt = self.val();
var txtLength = txt.length;
if(txt && txtLength>0){
if(txt.match(/^https?\:\/\/\S+\.\w+/)){
self.next().remove().end().after('<span class="ok">valid</span>');
}else{
self.next().remove().end().after('<span class="err">正しいURLを入力してください</span>');
}
}else{
$(this).next().remove();
}
});
});
入力で正しいURLの表記になるまで
正しいURLの入力かどうか
txt.match(/^https?\:\/\/\S+\.\w+/)
^https?\:\/\/\S+\.\w+
| パターン(赤文字部分) | 説明 |
|---|---|
| ^ | ～で始まる |
| ? | httpもしくはhttps |
| \:\/\/ | コロンやスラッシュのエスケープ |
| \S+ | 空白や改行など以外の文字の繰り返し |
| \. | ドットのエスケープ |
| \w+ | 英数字の繰り返し |
途中で
URLの最初のドット位置の右隣までしかチェックされないことにはなりますが，
必須項目のバリデーション
さて，
HTML
<form>
<dl>
<dt>名前<span class="required">[必須]</span></dt>
<dd><input type="text" id="name" value="" class="required" /></dd>
</dl>
<dl>
<dt>性別<span class="required">[必須]</span></dt>
<dd class="inline checkRequired">
<input type="radio" value="man" id="man" name="gender" /><label for="man">男性</label>
<input type="radio" value="woman" id="woman" name="gender" /><label for="woman">女性</label>
</dd>
</dl>
<dl>
<dt>趣味<span class="required">[必須]</span></dt>
<dd class="inline checkRequired">
<input type="checkbox" name="hobby" id="internet" value="インターネット" class="required" /><label for="internet">インターネット</label>
<input type="checkbox" name="hobby" id="movie" value="映画" /><label for="movie">映画</label>
<input type="checkbox" name="hobby" id="books" value="読書" /><label for="books">読書</label>
</dd>
</dl>
<p><input type="submit" value="送信" /></p>
</form>
※ 上記HTMLはあくまでサンプル用です。サンプル用なので，
入力必須項目が入力されているかチェック
jQuery(function($){
$('#name').bind('keyup blur',function(){
var self = $(this);
var txt = self.val();
var txtLength = txt.length;
if(txt && txtLength>0){
if(txt.match(/^\s/)){
self.next().remove().end().after('<span class="err">最初に空白は入力できません。</span>');
}else{
self.next().remove().end().after('<span class="ok">valid</span>');
}
}else{
self.next().remove().end().after('<span class="err">入力必須項目です。</span>');
}
});
$(".checkRequired").bind('keyup blur click',function(){
var self = $(this);
if($(":checked",this).length > 0){
self.children().filter('.err').remove();
}else{
self.children().filter('.err').remove();
self.append('<span class="err">入力必須項目です。</span>');
}
});
$('form').submit(function(){
$('.err').remove();
$("input.required").each(function(){
var self = $(this);
if(self.val()==""){
self.next().remove().end().after('<span class="err">入力必須項目です。</span>');
}
});
$(".checkRequired").each(function(){
var self = $(this);
if($(":checked",this).length == 0){
self.append('<span class="err">入力必須項目です。</span>');
}
});
return false;
});
});
チェックするタイミングは，
テキストボックスの入力判定は
今回の例ではラジオボタンやチェックボックスの親ボックスに
今回の各サンプルは，
