Inline Validation


詳細: シンプルなフォームバリデーションです。エフェクトも無く、汎用性のあるベーシックなタイプ。
デモ: demo
チュートリアル: Inline Validation
ライセンス: -
$(document).ready(function(){

	$('.contactForm input[type=text], .contactForm textarea').blur(function(){

		var element = $(this);
		var elementName = element.attr('name');
		var elementValue = element.val();

		var results = {
			valid: true,
			msg: ''
		};

		element.parent().find('span.errorMsg').remove();

		switch(elementName)
		{
			case 'email':
				if(-1 == elementValue.indexOf('@') || '' == elementValue)
				{
					results.valid = false;
					results.msg = "Please enter a valid email address";
				}
			break;

			case 'message':
				if('' == elementValue)
				{
					results.valid = false;
					results.msg = "Please enter a message";
				}
			break;

			default:
			break;
		}

		if(false === results.valid)
		{
			element.parent().append('<span class="required errorMsg">' + results.msg + '</span>');
		}
	});

});

Related snippet :

  • Description: タブをクリックするとスライドしながら出現するコンタクトフォームを実装出来ます。フィードバック用にもいいですね。 Sample: demo ...
  • Description: 画像を使わず、テキストでスタイリッシュなメニューやボタンを実装します。セレクトコンテンツやドロップダウンにも対応。クロスブラウザにも対応しています。 ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: コンテンツスライダーにバリデーション付きのコンタクトフォームを埋め込んだもの。不備があるとチェックが付きます。順番も追えるのでユーザーとしても縦 ...
  • Description: フォームをデザインするプラグインです。チェックボックスやラジオボタン、スムーズに開くプルダウンなどにUIを変える事ができます。クロスブラウザで動作し ...
  • Description: シンプルなモーダルウィンドウです。jQueryUIとThickbox Varietiesを併用するタイプで、クロスブラウザで動作します。使いどころは ...
  • Description: MootoolsのサイトにあるようなメニューのエフェクトをjQueryで動かしたもの。アクセス時にアニメーションを掛け、マウスオーバー時にもアニメー ...