トップページ -> 実践知識 -> JavaScript による Web プログラミング -> フォームのバリデーションとヒントの表示 (JQuery Form Validation And Hints を使用)
[サイトマップへ], サイト内検索:

フォームのバリデーションとヒントの表示 (JQuery Form Validation And Hints を使用)

サイト構成 連絡先,業績など 実践知識 コンピュータ 教材 サポートページ

この Web では,次のことを行う.


準備

◆ (オプション) JQuery Form Validation And Hints をダウンロード

次のサイトから入手.

http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-validation-and-hints-client-side-form-validation.html

◆ JavaScript に関する Web ブラウザの設定


フォームのバリデーションとヒントの表示 (JQuery Form Validation And Hints を使用)

下のプログラム例では、 jQuery, JQuery Form Validation And Hints のダウンロード作業は行わないで,リンクして使うことにしている.

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

    <title>
      フォームのバリデーションとヒントの表示 (JQuery Form Validation And Hints を使用)
    </title>
    
    <link rel="stylesheet" href="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/demos-header.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/demo-errors.css" type="text/css" media="all" />
      <!-- jQuery 1.5 以下で動く (2014/05)  //--> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="//www.icograma.com/cms/wp-content/themes/icograma/rsrc/js/jquery.form-validation-and-hints.js" type="text/javascript"></script>
  </head>

  <body>
    <form> 

      <ul>
        <li> 
          <div class="field required"> 
            <label>氏名(文字列)</label>: 
            <input class="text verifyText" type="text" /> 
            <span class="iferror">(必須)</span> 
          </div> 
        </li> 

        <li> 
          <div class="field required"> 
            <label>パスワード(文字列)</label> 
            <input class="text" type="password" title="*Password hint..."/>
            <span class="iferror">(必須)</span> 
          </div> 
        </li> 
          
        <li> 
          <div class="field"> 
            <label>住所(任意)(文字列)</label> 
            <input class="text" type="text" /> 
          </div> 
        </li> 
          
        <li>           
          <div class="field required"> 
            <label>年齢(整数値)</label> 
            <input class="text verifyInteger" type="text" size="8" /> 
            <span class="iferror">(整数値)</span> 
          </div> 
        </li> 
          
        <li>           
          <div class="field required"> 
            <label>電子メールアドレス</label> 
            <input class="text verifyMail" type="text" size="24" title="*mail(a)example.com" /> 
            <span class="iferror">(電子メールアドレス)</span> 
          </div> 
        </li> 
          
        <li>           
          <div class="field"> 
            自由記入(任意)(文字列) <br /> 
            <textarea rows="10" cols="50" title="*自由に記入してください."></textarea> 
          </div> 
        </li> 
          
        <p>           
          <div class="field required"> 
            <input class="checkbox" type="checkbox" name="terms" />説明を読んだらチェック<br /> 
            <span class="iferror">(チェックが必要です)</span> 
          </div> 
        </p> 
            
          <div class="field required"> 
            <input class="radio" type="radio" name="color" value="red" /> 赤色
            <input class="radio" type="radio" name="color" value="blue" /> 青色<br /> 
            <span class="iferror">(どれか1つを選ぶ)</span> 
          </div> 
              
        <li>           
          <div class="field required"> 
            <label>セレクトメニュー</label> 
            <select> 
              <option value="">Select an option…</option><br /> 
              <option value="1">Option 1</option><br /> 
              <option value="2">Option 2</option><br /> 
            </select> 
            <span class="iferror">(どれか1つを選ぶ)</span> 
          </div> 
        </li> 
      </ul>

      <input class="submit" type="submit" value="Send" /> 

    </form> 

  </body>
</html>