実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax » Spry: ウィジェット（UIコントロール） » Form Validate（フォーム入力チェック）| PHP & JavaScript Room</title>
<script type="text/javascript" src="/content/spry/widgets/selectvalidation/SpryValidationSelect.js"></script>
<script type="text/javascript" src="/content/spry/widgets/textfieldvalidation/SpryValidationTextField.js"></script>
<script type="text/javascript" src="/content/spry/widgets/textareavalidation/SpryValidationTextarea.js"></script>
<script type="text/javascript" src="/content/spry/widgets/checkboxvalidation/SpryValidationCheckbox.js"></script>
<script type="text/javascript" src="/content/spry/widgets/radiovalidation/SpryValidationRadio.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/selectvalidation/SpryValidationSelect.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/textfieldvalidation/SpryValidationTextField.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/textareavalidation/SpryValidationTextarea.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/checkboxvalidation/SpryValidationCheckbox.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/radiovalidation/SpryValidationRadio.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/formvalidate/custom.css" />
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<fieldset>
<legend>Sample Form</legend>
<form id="form1" name="form1" method="post" action="">
<dl>
<dt>名前</dt>
<dd id="sprytextfield_username">
<input type="text" id="username" name="username" value="" />
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">氏名を入力してください。</span>
</div>
</dd>
<dt>年齢</dt>
<dd id="sprytextfield_age">
<input type="text" id="age" name="age" value="" size="3" maxlength="2" />才
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">年齢を入力してください。</span>
<span class="textfieldInvalidFormatMsg">整数値で入力してください。</span>
</div>
</dd>
<dt>郵便番号</dt>
<dd id="sprytextfield_zipcode">
<input type="text" id="zipcode" name="zipcode" value="" />
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">郵便番号を入力してください。</span>
</div>
</dd>
<dt>都道府県</dt>
<dd id="spryselect_area">
<select name="area" id="area">
<option value="" selected="selected">-- 選択してください --</option>
<optgroup label="北海道・東北地方">
<option value="北海道">北海道</option><option value="青森県">青森県</option><option value="岩手県">岩手県</option><option value="宮城県">宮城県</option><option value="秋田県">秋田県</option><option value="山形県">山形県</option><option value="福島県">福島県</option>
</optgroup>
<optgroup label="信越地方">
<option value="新潟県">新潟県</option><option value="長野県">長野県</option>
</optgroup>
<optgroup label="北陸地方">
<option value="富山県">富山県</option><option value="石川県">石川県</option><option value="福井県">福井県</option>
</optgroup>
<optgroup label="関東地方">
<option value="東京都">東京都</option><option value="神奈川県">神奈川県</option><option value="埼玉県">埼玉県</option><option value="千葉県">千葉県</option><option value="茨城県">茨城県</option><option value="栃木県">栃木県</option><option value="群馬県">群馬県</option><option value="山梨県">山梨県</option>
</optgroup>
<optgroup label="東海地方">
<option value="愛知県">愛知県</option><option value="岐阜県">岐阜県</option><option value="静岡県">静岡県</option><option value="三重県">三重県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="大阪府">大阪府</option><option value="兵庫県">兵庫県</option><option value="京都府">京都府</option><option value="滋賀県">滋賀県</option><option value="奈良県">奈良県</option><option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国地方">
<option value="鳥取県">鳥取県</option><option value="島根県">島根県</option><option value="岡山県">岡山県</option><option value="広島県">広島県</option><option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国地方">
<option value="徳島県">徳島県</option><option value="香川県">香川県</option><option value="愛媛県">愛媛県</option><option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州地方">
<option value="福岡県">福岡県</option><option value="佐賀県">佐賀県</option><option value="長崎県">長崎県</option><option value="熊本県">熊本県</option><option value="大分県">大分県</option><option value="宮崎県">宮崎県</option><option value="鹿児島県">鹿児島県</option><option value="沖縄県">沖縄県</option>
</optgroup>
<option value="海外">海外</option>
</select>
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="selectRequiredMsg">都道府県を選択してください。</span>
</div>
</dd>
<dt>住所</dt>
<dd id="sprytextarea_address">
<textarea name="address" id="address" cols="45" rows="5"></textarea>
<!-- Add an error message -->
<div class="errors">
<span id="my_counter_span"></span>文字
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textareaRequiredMsg">住所が入力されていません。</span>
<span class="textareaMinCharsMsg">2文字以上入力してください。</span>
</div>
</dd>
<dt>携帯電話番号</dt>
<dd id="sprytextfield_phone">
<input type="text" id="phone" name="phone" value="" />
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">携帯電話番号を入力してください。</span>
<span class="textfieldInvalidFormatMsg">(000)0000-0000形式で入力してください。</span>
</div>
</dd>
<dt>URL</dt>
<dd id="sprytextfield_url">
<input type="text" id="url" name="url" value="" size="60" />
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">URLを入力してください。</span>
<span class="textfieldInvalidFormatMsg">「http://」「https://」「ftp://」から始まるURLを入力してください。</span>
</div>
</dd>
<dt>メールアドレス</dt>
<dd id="sprytextfield_email">
<input type="text" id="email" name="email" value="" />
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">メールアドレスを入力してください。</span>
<span class="textfieldInvalidFormatMsg">メールアドレスが不正です。</span>
</div>
</dd>
<dt>支払方法</dt>
<dd id="spryradio_payment">
<label for="radio_1"><input type="radio" id="radio_1" name="payment" value="郵便振替">郵便振替</label>
<label for="radio_2"><input type="radio" id="radio_2" name="payment" value="銀行振込">銀行振込</label>
<label for="radio_3"><input type="radio" id="radio_3" name="payment" value="代引">代引</label>
<label for="radio_4"><input type="radio" id="radio_4" name="payment" value="クレジット">クレジット</label>
<label for="radio_5"><input type="radio" id="radio_5" name="payment" value="コンビニ払い">コンビニ払い</label>
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="radioRequiredMsg">支払方法を選択してください。</span>
</div>
</dd>
<dt>生年月日</dt>
<dd id="sprytextfield_birth">
<input type="text" id="birth" name="birth" value="" />
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="textfieldRequiredMsg">生年月日を入力してください。</span>
<span class="textfieldInvalidFormatMsg">yyyy/mm/dd形式で入力してください。存在しない年月日は入力できません。</span>
</div>
</dd>
<dt>利用規約</dt>
<dd id="sprycheckbox_agreement">
<input type="checkbox" id="agreement" name="agreement" value="1"/>
<label for="agreement">利用規約に同意する</label>
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="checkboxRequiredMsg">利用規約に同意してください。</span>
</div>
</dd>
<dt>好きな映画のジャンル</dt>
<dd id="sprycheckboxes_genru">
<input type="checkbox" id="checkbox_1" name="movieGenru" value="hollor" />
<label for="checkbox_1">ホラー</label>
<input type="checkbox" id="checkbox_2" name="movieGenru" value="romance" />
<label for="checkbox_2">ロマンス</label>
<input type="checkbox" id="checkbox_3" name="movieGenru" value="action" />
<label for="checkbox_3">アクション</label>
<input type="checkbox" id="checkbox_4" name="movieGenru" value="human" />
<label for="checkbox_4">ヒューマン</label>
<input type="checkbox" id="checkbox_5" name="movieGenru" value="commedy" />
<label for="checkbox_5">コメディ</label>
<!-- Add an error message -->
<div class="errors">
<img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
<span class="checkboxRequiredMsg">1つ以上選択してください。</span>
<span class="checkboxMaxSelectionsMsg">3つ以内で選択してください。</span>
</div>
</dd>
</dl>
<p class="buttons">
<input type="submit" name="Submit" id="submit" value="送信" />
<input type="reset" name="Reset" id="reset" value="リセット" />
</p>
</form>
</fieldset>
<script type="text/javascript">
// 氏名
var sprytextfield_username = new Spry.Widget.ValidationTextField("sprytextfield_username", "none", {useCharacterMasking:true, validateOn:["change"]});
// 年齢
var sprytextfield_age = new Spry.Widget.ValidationTextField("sprytextfield_age", "integer", {minValue:1, maxValue:2, validateOn:["blur"]});
// 郵便番号
var sprytextfield_zipcode = new Spry.Widget.ValidationTextField("sprytextfield_zipcode", "zip_code", {useCharacterMasking:true, hint:"xxx-xxxx", format:"zip_custom", pattern:"000-0000", validateOn:["blur", "change"]});
// 都道府県
var spryselect_area = new Spry.Widget.ValidationSelect("spryselect_area", {validateOn:["change"]});
// 住所
var sprytextarea_address = new Spry.Widget.ValidationTextarea("sprytextarea_address", { hint:"市区町村、番地、アパートマンション名等を入力してください。入力可能な文字数は、2文字以上50文字未満です。", minChars:2, maxChars:50, counterType:"chars_remaining", counterId:"my_counter_span", validateOn:["change"]});
// 電話番号（整数値）
var sprytextfield_phone = new Spry.Widget.ValidationTextField("sprytextfield_phone", "custom", {useCharacterMasking:true, hint:"(000)0000-0000", pattern:"(000)0000-0000", validateOn:["change"]});
// メールアドレス
var sprytextfield_email = new Spry.Widget.ValidationTextField("sprytextfield_email", "email", {useCharacterMasking:true, validateOn:["blur"]});
// 支払い方法
var spryradio_payment = new Spry.Widget.ValidationRadio("spryradio_payment", {validateOn:["change"], maxSelection:1});
// 生年月日
var sprytextfield_birth = new Spry.Widget.ValidationTextField("sprytextfield_birth", "date", {useCharacterMasking:true, format:"yyyy/mm/dd", hint:"yyyy/mm/dd", validateOn:["change"]});
// 利用規約
var sprycheckbox_agreement = new Spry.Widget.ValidationCheckbox("sprycheckbox_agreement", {validateOn:["change"], maxSelection:1});
// ジャンル（最大選択数制限）
var sprycheckboxes_genru = new Spry.Widget.ValidationCheckbox("sprycheckboxes_genru", {validateOn:["change"], maxSelections:3});
// URL
var sprytextfield_url = new Spry.Widget.ValidationTextField("sprytextfield_url", "url", {validateOn:["change"]});
</script>
</body>
</html>