チュートリアルのブログ

クライアントjQueryでサイドフォームのバリデーション

2008年11月6日フィリップBeel％1つのコメントで Twitterの投稿 ポストヤフーにバズ ポストDiggに ポストRedditに ポストStumbleUponのに




このチュートリアルでは、単純なお問い合わせフォームbassistance jQueryの検証プラグインを使用して検証するためにあなたが表示されます。 この前に提出されている場合は、フォームを検証することができます。 ここでデモを参照してください。

ステップ1 -フォーム

これと同じ形式のAjaxお問い合わせフォームのチュートリアルで紹介されました。ですから、元のフォームを拡張するには、このチュートリアルでは非常に簡単に操作できるようにする必要があります。

我々は、それをcontact.htmlで、我々がそのように我々のフォームが作成されます呼び出される新しいファイルを必要とオフを開始します。


<div id="container">
<form id="contactForm" method="" action="">
<p>
<label for="name">Name </label>
<input id="name" name="name" />
</p>
<p>
<label for="email">E-Mail </label>
<input id="email" name="email" />
</p>
<p>
<label for="message">Your Message </label>
<textarea id="message" name="message" rows="4" cols="30" >
</textarea>
</p>
<p>
<input class="submit" type="submit" value="submit"/>
</p>
</form>
</div>

今、我々が検証されます2つの分野とは、テキストボックスを持つ簡単なフォームをしている。

ステップ2 -プラグイン

我々が使っているプラグインはここからダウンロードすることができます、また、これはここからdowloadedすることができますjQueryのコピーが必要になります。 今は、我々のように私たちcontact.htmlファイルにこれを添付する必要があるファイルがあります。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

注意してくださいその非常には、jQueryの最初のそれ以外の場合は、フレームワークでは動作しませんコール重要です。

ステップ3 -コード

コード自体は非常に軽い重量、それをチェックアウトする


//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
//set the rules for the field names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
},
},
//set messages to appear inline
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message"
}
});
});

すべてここでやっているのは、フォームの検証検証を使用して開始し、onload関数を呼び出しています。検証プラグインをいくつかのparamentersを通過する必要があります。

ルール -あなたに、私たちの場合は、お名前、Eメールやメッセージを使用して動作するようにしたいフィールド名を指定することができます。 この我々の場合は、フィールドが必須であるかどうか、のいずれかをtrueまたはfalseの場合、我々のすべてのフィールドを検証する必要を渡すことによって指定しているが、内部はすべてtrueとしてマークされます。 次のパラメータは、..ご想像の通り、文字の最小数を設定できるように入力する必要がminlengthです。

メッセージ -もしmessgeは、デフォルトの1つは、このフィールドに何か"などが必要です"と言うが提供されて設定しないことを選択する場合は、特定のフィールドには、特定のメッセージを設定することができます

ステップ4 - TidyのIt Upを

警告メッセージのいくつかのスタイルを追加できますが、顕著な命令はしませんが見えるようにしてください。 そのときに、エラーメッセージは、クラス内でラップされたエラーが我々にとって簡単のようにいくつかのスタイル情報を追加することと呼ばれるが表示されることがあります


.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}

そして、thatsすべてそこにすることです。 コードをダウンロードしようと自分ではここ



コメント

jQueryを1つの応答"クライアント側のフォーム検証する"と
  1. マイケル- さんの意見：
    2008年11月6日は午前9時49分午後

    しかし、便利なコースの場合には、サーバーがする側での検証などが必要です。

チュートリアルのブログ