入力フォーム(validationEngine使用)


ValidationEngineを使ったフォーム

ValidationEnginを使って入力データをチェックし、入力形式のエラーを表示します。

応募フォームの例














CODE
HTML 

   <form id="form_1" name="form_1"   method="post" style="background-color:lightyellow;">
 
    <input type="hidden" id="shokushu" name="shokushu" value="">
 
    <label for="namae" class="ness">お名前(姓と名の間に空白を入れてください)</label>
    <input type="text" id="namae" name="namae" class="validate[required] text ui-widget-content ui-corner-all">
 
    <label for="kana" class="ness">フリガナ(姓と名の間に空白を入れてください)</label>
    <input type="text" id="kana" name="kana" class="validate[required,custom[katakana]] text ui-widget-content ui-corner-all">
  
 <br />
    <label class="ness">性別</label><br />
    <input type="radio" name="seibetsu" id="dansei" value="男性" class="validate[required] radio"><label for="dansei">男性</label>
 
    <input type="radio" name="seibetsu" id="josei" value="女性" class="validate[required] radio"><label for="josei">女性</label><br />
 
 <br />
    <label for="tanjoubi" class="ness">生年月日(YYYY-MM-DDの形式で)</label>
    <input type="text" name="tanjoubi" id="tanjoubit" value="" class="validate[custom[date], text ui-widget-content ui-corner-all">
 
 <br />
    <label for="denwa" class="ness">携帯電話番号</label>
    <input type="text" name="denwa" class="validate[required,custom[phone]] text ui-widget-content ui-corner-all">
 
    <label for="email" class="ness">メールアドレス</label>
    <input type="text" id="email" name="email" class="validate[required,custom[email]] text ui-widget-content ui-corner-all">
 
    <label for="email" class="ness">携帯アドレス</label>
    <input type="text" id="pmail" name="pmail" class="validate[required,custom[email]] text ui-widget-content ui-corner-all">
 
 <label for="gakureki" class="ness">最終学歴/在学校名（専攻分野まで記入してください）</label>
    <input type="text" id="gakureki" name="gakureki" class="validate[required] text ui-widget-content ui-corner-all">
 
    <label id="gakunenlabel" for="gakunen" class="ness">最終学歴/在学校名について</label>
    <select id="gakunen" name="gakunen" class="validate[required] ui-widget-content ui-corner-all">
      <option>お選びください</option>
      <option>1年</option>
      <option>2年</option>
      <option>3年</option>
      <option>4年</option>
      <option>5年</option>
      <option>6年</option>
      <option>卒業</option>
      <option>中退</option>
    </select>
 <br /><br />
 
    <label id="shokugyoulabel" for="shokugyou" class="ness">現在のご職業</label>
    <select id="shokugyou" name="shokugyou" class="validate[required] ui-widget-content ui-corner-all">
      <option>お選びください</option>
      <option>学生</option>
      <option>社会人</option>
      <option>その他</option>
    </select>
 <br /><br />
 
    <label for="moyori" class="ness">最寄駅</label>
    <input type="text" name="moyori" id="moyori" value="" class="validate[required,custom[zenkaku]] text ui-widget-content ui-corner-all">
 
    <label for="postnum" class="ness">郵便番号</label>
    <input type="text" name="postnum" id="postnum" value="" class="validate[custom[postnum]] text ui-widget-content ui-corner-all">
 
    <label for="juusho" class="ness">住所</label>
    <input type="text" id="juusho" name="juusho" class="validate[required] text ui-widget-content ui-corner-all">
 
    <label for="shitsumon" class="ness">貴方からのご連絡・ご質問等がありましたら記入してください</label>
    <textarea type="text" id="shitsumon" name="shitsumon" class=" ui-corner-all" style="width:96%;min-height: 80px;"></textarea>
  <br />
     </fieldset>
 
   <br />
   <input type="submit" name="" id="btn_submit" class="btn3" value="送信する">
   <br />
   <br />
 
   </form>
Javascript 

// 下記を読みこませておく！
<script src="js/jquery.validationEngine.js"></script>
<script src="js/jquery.validationEngine-ja.js"></script>
CSS 

<link rel="stylesheet" href="css/validationEngine.jquery.css">