読者です 読者をやめる 読者になる 読者になる

【JS】よくわかるJavascriptの教科書2

簡単なフォームの入力チェックを勉強しました。
サンプル
f:id:waterlow2013:20140706154648p:plain

html

<dt>お名前<span class="require">必須</span></dt>
<dd><input type="text" name="myname" size="35"></dd>
<dt>性別<span class="require">必須</span></dt>
<dd>
  <label><input type="radio" name="gender" value="男性">男性</label>
  <label><input type="radio" name="gender" value="女性">女性</label>
</dd>
<dt>年齢</dt>
<dd><input type="text" name="age" size="10"></dd>

htmlタグについて全く知らなかったのでこの範囲を理解するレベルで調べました。

dl,dd,dt

定義リスト。その名の通り用語とその定義を記述するためのもの。dtがtermでddがdescription、それをdlでlistするイメージ。ここでは項目名とフォームをセットにするために使ってます。
HTMLタグについて定義リスト<dl><dt><dd>を使いこなす! | ホームページビルダー私でも出来たホームページ

label

いままでlabelなんて使わずにフォームを作っていたのですが、なるほどラジオボタンチェックボックスはこれがないとダメですね!labelで指定した場所をクリックすればラジオボタンを選択出来ます。
labelタグの必要性 | フォーム改善のプロ

p,div,span

いつもはdivやpをよく目にしてたのですが、spanなんてのもあるらしく…。ブロック要素かインライン要素か、またどんな要素を含むことができるか等で違いがあるようです。
p要素、div要素、span要素のそれぞれの違い | TechMemo

// name
$('input[name=myname]').bind('blur', function() {
  if ($(this).val() === '') {
    $(this).addClass('error').parent().append('<p class="error">※この項目は必ずご記入ください</p>');
  }
})
.bind('focus', function() {
  if ($(this).next() !== false) {
    $(this).removeClass('error').next().remove();
  }
});

// gender
$('input[name=gender]').parents('dd').append('<p class="error">※この項目は必ずお選びください</p>').end()
.bind('change', function() {
  if($('input[name=gender]:checked').val() !== '') {
    $(this).parents('dd').find('.error').remove();
  }
});

// age
$('input[name=age]').bind('blur', function() {
  $(this).parent().find('.error').remove();
  if(isNaN($(this).val())) {
    $(this).addClass('error').parent().append('<p class="error">※この項目は数値でご記入ください</p>')
  }
})
.bind('focus', function() {
  if ($(this).next() !== false) {
    $(this).removeClass('error').next().remove();
  }
});

jQueryの入門です。やっていることは名前が空欄のままフォーカスが外れたらエラー、性別が選択されていないとエラー、年齢に数字以外が入力されたままフォーカスが外れたらエラーです。
jQueryでだいぶ簡単に書けるとはいえそこそこ複雑ですね!